vue 路由传参中刷新页面参数丢失 及传参的几种方式？

路由传参的几种方式

比如：<div v-for="item in items" @click="get(item.id)">

传参方式1：

　　1) get:function(id){

　　　　　　this.$router.push({ path: `/describe/${id}`})

　　　}

　　 2) 相应路由配置：

　　　　{

　　　　　　path: '/describe/:id',

　　　　　　name: 'Describe',

　　　　　　component: Describe

　　　　}

　　 3) 子组件取 this.$route.params.id ;

传参方式2：

　　1）父组件通过name来匹配

　　　　 this.$router.push({

　　　　　　name: 'Describe', params: { id: id }

　　　　 })

　　 2) 相应路由配置：

　　　　{

　　　　　　path: '/describe/:id',

　　　　　　name: 'Describe',

　　　　　　component: Describe

　　　　}

　　 3) 子组件是通过： this.$route.params.id

注意：此方式2有一个小坑，以前用params 时感觉很方便，就用了方式2。

　　坑一：子组件第一次没有获取到值，原来我是用path路径，而没有用name。我把它改掉了。

　　坑二：改掉后发现刷新参数不见了。。。。。。。。。。。根据网上大神的建议，再路由配置中加了path: '/describe/:id', 相当于混合了第一种方式； 但是。。。。。。。。

　　坑三：由于根路径是登陆页，每次返回，并不是返回上一页，而是直接返回了根路径登陆页（我在路由配置中加了好多参数，导致describe丢失），这就有点烦了，本来你把主页设为 /也可以，但是并不是我一开始想要的结果， 哈哈。。。方案三解决了上述所有的问题；

传参方式3：（刷新数据保存）

　　父组件：

　　　　　　this.$router.push({

　　　　　　　　　　 path: '/describe', query: { id: id }

　　　　　　 })

　　路由设置：

　　　　　　 {

　　　　　　　　 path: '/describe',

　　　　　　　　 name: 'Describe',

　　　　　　　　 component: Describe

　　　　　　}

　  子组件获取：

　　　　　　this. $route.query.id

注意所有的子组件获取是$route，而不是$router ,哈哈，很开心完美解决了路由传参

作者：人参，每篇随笔皆原创（除非注明原作者的随笔），欢迎指正！