vue中路由传参刷新页面后参数丢失的问题
一般的路由传参this.$router.push({name:'My',params:{id:'123'}})this.$router.push({path:'/my',query:{id:'123'}})对于传参过后,跳转到的页面进行刷新行为,参数丢失问题,一般有下面几种方法用query传参,query类似于get传参,参数会在url中显示,例如:this.$router.push({path:
·
一般的路由传参
this.$router.push({name:'My',params:{id:'123'}})
this.$router.push({path:'/my',query:{id:'123'}})
对于传参过后,跳转到的页面进行刷新行为,参数丢失问题,一般有下面几种方法
- 用query传参,query类似于get传参,参数会在url中显示,例如:
this.$router.push({path:'/my',query:{key: []}})
接收参数:
this.$route.query.key
- params传参,另外需要在定义路由时加上参数的key
例如:
this.$router.push({name:'My',params:{key:[]}})
接收参数:
this.$route.params.key
还要在定义路由时加一个:key,例如:
{
path: '/my/:key',
name: 'My',
component: My
}
这样实现的效果也是在路由中加了参数,看大家习惯,都可以做到刷新页面参数不丢失
3. 用query传参时,比如传了一个数组,那么在刷新页面后,传过来的数组变成了[object object]
解决方法:在传参的时候将要传递的参数转换成字符串,例如:
this.$router.push({path:'/my',query:{key: JSON.stringify([])}}) //JSON.stringify可以把数组或对象转变成字符串
在接受参数的页面,这样就可以解决这个问题
JSON.parse(this.$route.query.key)
更多推荐
已为社区贡献5条内容
所有评论(0)