vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能。

使用了this.$router.push(编程式导航)

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

product页面中:因为只需要遮住产品列表页来显示产品详情页,所以添加了router-view

vue编程式导航 随笔 第1张

点击列表后,传递产品id,作为params的内容。

vue编程式导航 随笔 第2张

productDetail页中:首先获取传递过来的id,然后就可以进行后续逻辑操作(数据请求)了。

vue编程式导航 随笔 第3张

返回操作:

 vue编程式导航 随笔 第4张

上述方法只是本人实现功能使用的,还有其他实现方法。更多使用方法,建议查看vue官网:https://router.vuejs.org/zh/guide/essentials/navigation.html#routerpushlocation

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄