【一】页面传参有两种方式
第一种
传递参数 -- this.$router.push({path: ' 路由 ', query: {key: value}})
参数取值 -- this.$route.query.key
第二种: 刷新会丢参数
传递参数 -- this.$router.push({name: ' 路由的name ', params: {key: value}})
参数取值 -- this.$route.params.key
注意传参是this.$router, 取参时是this.$route。
第一种query方式进行参数传递时,参数会显示在地址栏里,相当于get请求。而且刷新页面时参数不会丢失。
第二种params方式进行参数传递时,参数不会显示在地址栏里【但还是能看到参数值】,相当于post请求。而且刷新页面时参数会丢失。
但是这两种方式返回时,参数都会丢失。
即 A--传参到B--C, C再返回到B时,参数都会丢失。
现在要刷新页面参数不丢失,而且返回参数也不丢失的写法
【2】解决办法传参问题
现在从商品列表commodity,切换到商品详情commodityDetail,再切换到购物车shoppingCar。
--路由配置
{ path: '/commodityDetail/:commodityId',
name: 'commodityDetail',
component: commodityDetail
},
--commodity, 传参
this.$router.push({
name: 'commodityDetail',
params: {commodityId: commodityId}
});
--commodityDetail, 接收参数
this.$route.params.commodityId
路由配置path里面多了个/:commodityId的配置,
测试了一下,不论是在commodDetail刷新还是从shoppingCar页返回到commodityDetail页都正常了。
所有不涉及到页面传参的,两种写法都行,
涉及到页面传参的,还是利用配置来达到目的吧。
以上是我自己在项目里面测试得到的结果,如果有不对的地方,欢迎指出