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

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

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

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

path 方式跳轉(zhuǎn) （query）

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

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

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

獲取query傳參

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

name 方式跳轉(zhuǎn)（params）

傳參??

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

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

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

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

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

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

注意！

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

但是！

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

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

解決辦法

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

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

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

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

解決vuex中數(shù)據(jù)刷新頁(yè)面后數(shù)據(jù)丟失  ??點(diǎn)我 

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

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

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

最新評(píng)論