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}}

 

 

4. 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.youkuaiyun.com/bluefish_flying/article/details/81011230

转载于:https://www.cnblogs.com/wayneliu007/p/10717761.html