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.csdn.net/bluefish_flying/article/details/81011230