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

2023-06-08,,

在页面跳转中,我通过路由传参,结果发现页面参数丢失了。路径返回了根目录。。。。

1. 先说下路由传参的几种方式吧?

比如:<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 ,哈哈,很开心完美解决了路由传参

vue 路由传参中刷新页面参数丢失 及传参的几种方式?的相关教程结束。

《vue 路由传参中刷新页面参数丢失 及传参的几种方式?.doc》

下载本文的Word格式文档,以方便收藏与打印。