vue踩坑之params傳遞參數

1.我們都知道 vue中 params傳遞參數都需要配置占位符 。

2.但是 一定要注意， 重點來了：

如果 /search的占位符沒有值的時候， 也就是沒有傳遞params參數時， 是無法跳轉到 search組件的，路徑會重新定位到 跟組件 /

3. vue 報錯

vue-router] missing param for named route "search": Expected "keyword" to be defined

4. 解決方式

  在路徑的占位符后面添加  一個     ?     ，  代表 這個params參數可以傳遞，也可以不傳遞。 

使用params方式傳參數據丟失

在vue的組件之間傳遞數據時，因為不想url上面有?xx=yy的內容出現，所以選擇params形式傳遞參數，正常跳轉，好看又方便

問題出現了：突然在刷新跳轉之后的頁面的時候，頁面的數據加載不出來了，仔細一看，原來是路由中攜帶的參數不見了!! 組件刷新還能導致路由的參數丟失。

Vue-router傳遞參數的方式說明

• query傳遞參數

query傳遞參數不會出現路參數丟失的情況，所以不需要做其他的配置，不過缺點就是參數會拼接在url后面: url?xx=yy 這種方式來傳遞參數，會暴露參數，并且url也有字符上限限制

使用方式：

this.$router.push({path: 'path', query: {id:1}})

獲取參數：

this.$route.query.id獲取key為id的路由參數

• params傳遞參數

params傳遞參數是將參數放在route對象中，沒有放在url后面，但是會有一個問題，在跳轉之后的頁面中刷新的時候，會導致當前路由中保存的params的參數丟失

使用方式：

this.$router.push({name: 'name', params:{id:1}})

獲取參數：

this.$route.params.id 獲取route對象中的Params的參數信息

解決使用params傳遞參數刷新頁面參數丟失

使用params傳遞參數，參數沒有像query那樣，拼接在url后面，所以刷新的時候會出現數據丟失，則無法獲取到數據

有兩種方式可以解決：

1.使用sessionStorage、localStorage

sessionStorage、localStorage根據具體的場景來選擇，保存到里面的數據不會在刷新下的時候丟失，不過在移動端，使用微信懸浮窗的時候，部分安卓機型的sessionStorage中的數據會丟失

2.使用params中的路由匹配

使用方式: 在router.js，即匹配路由規(guī)則的位置，加上占位符即可

{
? path: '/index/:num/:name',
? name: 'index',
? component: Index
}

params中的參數名稱需要和占位符的名稱一致即可

獲取參數，還是和獲取params中參數一致：this.$route.params.name

這樣的話，參數就會出現在url中，格式為：url/num/name，這種方式將參數放在url上，刷新的時候才不會丟失數據。

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論