Vue 单页面开发----实战三 路由传参

【一】页面传参有两种方式

第一种
传递参数  -- 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页都正常了。

所有不涉及到页面传参的，两种写法都行，

涉及到页面传参的，还是利用配置来达到目的吧。

以上是我自己在项目里面测试得到的结果，如果有不对的地方，欢迎指出