vue踩坑之params傳遞參數(shù)

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

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

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

3. vue 報錯

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

4. 解決方式

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

使用params方式傳參數(shù)據(jù)丟失

在vue的組件之間傳遞數(shù)據(jù)時，因為不想url上面有?xx=yy的內(nèi)容出現(xiàn)，所以選擇params形式傳遞參數(shù)，正常跳轉(zhuǎn)，好看又方便

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

Vue-router傳遞參數(shù)的方式說明

• query傳遞參數(shù)

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

使用方式：

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

獲取參數(shù)：

this.$route.query.id獲取key為id的路由參數(shù)

• params傳遞參數(shù)

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

使用方式：

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

獲取參數(shù)：

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

解決使用params傳遞參數(shù)刷新頁面參數(shù)丟失

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

有兩種方式可以解決：

1.使用sessionStorage、localStorage

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

2.使用params中的路由匹配

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

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

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

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

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

總結(jié)

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

最新評論