路由跳轉(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>

//簡寫不傳參
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
}]

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

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

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

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

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

注意！

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

但是！

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

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

解決辦法

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

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

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

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

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

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

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

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

最新評論