vue路由传参刷新丢失

没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:‘main’,params:{‘id’: 123}})的,没有在路由定义中配置参数,如下:

复制代码
router:[
{
path:‘/main’,
name:‘main’,
component:Main
}]

// 从index.vue,携带id=123跳到main.vue
this.$router.push({name:‘main’,params:{‘id’:123}}
复制代码
所以一旦页面刷新就会丢失路由传过来的参数了。

解决办法:

1.不修改路由配置,使用sessionStorage来马上缓存(通常在created钩子函数中)获得的路由参数,这种方法要自己把握好什么时候set,什么时候get,什么时候remove。

2.配置路由参数:配置后刷新不会丢失路由传参数

复制代码
router:[
{
path:‘/main/:id’,
name:‘main’,
component:Main
}]

// 从index.vue,携带id=123跳到main.vue
this.$router.push({name:‘main’,params:{‘id’:123}}
复制代码

3.使用query

复制代码
router:[
{
path:‘/main/’,
name:‘main’,
component:Main
}]

// 从index.vue,携带id=123跳到main.vue
this.$router.push({name:‘main’,query:{‘id’:123}}
复制代码

  1. params与query

params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params

query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

当使用params方法传参的时候,要在路由后面加参数名,成为路由的一部分,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以,另外query是拼接在url后面的参数,没有也没关系。

https://blog.csdn.net/bluefish_flying/article/details/81011230

好记性不如烂笔头,每天记录一点点

你可能感兴趣的:(vue,vue.js,前端,javascript)