快捷導(dǎo)航

vue-router路由傳參及隱藏參數(shù)問題

更新時間：2022年12月01日 14:31:36 作者：Bayi·

這篇文章主要介紹了vue-router路由傳參及隱藏參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

路由跳轉(zhuǎn)及傳參形式

vue中路由中需要傳遞參數(shù)的話可以用query和param傳遞，兩者類似于get和post。

先上路由配置文件（router/index.js)

const routes = [{
    path: '/chat',
    name: 'Chat',
    component: Chat
}, ]

<router-link :to="{ path: '/chat', query: { plan: 'private' }}">Register</router-link>

//簡寫不傳參
this.$router.push('/chat')

//全寫傳參
this.$router.push({path:'/chat',query:{name1:'1',name2:'2'}})

獲取query傳參

this.$route.query
//獲取結(jié)果
{name: "1", name2: "2"}

傳參??

<router-link :to="{ name: 'Chat', params: { id: '123',name:'巴依' }}"></router-link>

this.$router.push({name:'Chat',params:{id:'123',name2:'巴依'}})

//router配置
const routes = [{
    path: '/chat',
    name: 'Chat',
    component: Chat
}]

未搭配動態(tài)路由時導(dǎo)航欄顯示效果 ??此時，不會在導(dǎo)航欄中顯示傳遞的數(shù)據(jù)，也可以正常獲得params中的數(shù)據(jù)，但是刷新頁面后會丟失params中傳遞的數(shù)據(jù)

//router配置
const routes = [{
    path: '/chat/:id/:name',
    name: 'Chat',
    component: Chat
}]

設(shè)置動態(tài)路由后導(dǎo)航欄顯示效果 ??此時，就算刷新頁面也不會丟失params中的數(shù)據(jù)，但同時也暴漏的傳遞的數(shù)據(jù)

獲取params傳參結(jié)果??

this.$route.params
//獲取結(jié)果
{id: "123", name: "巴依"}

注意！

query傳參相當(dāng)于get方式，會把要傳遞的參數(shù)顯示在導(dǎo)航欄中。
params傳參相當(dāng)于post方式。默認(rèn)不會把傳遞的參數(shù)顯示在導(dǎo)航欄中。
query跳轉(zhuǎn)路由傳參顯示參數(shù)這對于普通數(shù)據(jù)沒什么,但是對于敏感數(shù)據(jù)，比如涉及到用戶敏感信息，用query就不好了。
我們可以用params方式傳遞參數(shù)，它不會把傳遞的參數(shù)顯示到導(dǎo)航欄中。

但是！

我們用 this.$route.params 獲取數(shù)據(jù)后。刷新頁面會丟失獲取到的數(shù)據(jù)，但我們不能保證說讓用戶不刷新吧。

<————刷新頁面后 params數(shù)據(jù)丟失

會Vuex的，別使用路由傳參了，直接把要傳遞的參數(shù)放到Vuex中它不香嗎？

然后通過mutations設(shè)置state中的變量。在跳轉(zhuǎn)后的頁面獲取Vuex中的變量

vuex的 store 中的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的，當(dāng)頁面刷新時，頁面會重新加載 vue 實(shí)例，vuex 里面的數(shù)據(jù)就會被重新賦值，這樣就會出現(xiàn)頁面刷新vuex中的數(shù)據(jù)丟失的問題。

如何解決不贅述了網(wǎng)上方法太多，點(diǎn)下面鏈接看吧

不想使用Vuex的，大致方法也在上圖中，可以使用 Storage 的方式來保存?zhèn)鬟f的參數(shù)。cookie也可以。

window.sessionStorage.setItem("tagUser", JSON.stringify(tag));
window.sessionStorage.getItem('tagUser')

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

您可能感興趣的文章: