vue-router路由傳參及隱藏參數(shù)問題
路由跳轉(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)路由時導(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ù)是保存在運行內(nèi)存中的，當(dāng)頁面刷新時，頁面會重新加載 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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
- vue?router進行路由跳轉(zhuǎn)并攜帶參數(shù)的實例詳解(params/query)
- Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
- vue-router如何實時動態(tài)替換路由參數(shù)(地址欄參數(shù))
- Vue3使用vue-router如何實現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
- 如何處理vue router 路由傳參刷新頁面參數(shù)丟失
- vue router動態(tài)路由設(shè)置參數(shù)可選問題
- vue-router路由參數(shù)刷新消失的問題解決方法
- 詳解vue-router2.0動態(tài)路由獲取參數(shù)
- Vue Router中獲取路由傳遞過來的參數(shù)(方法詳解)
相關(guān)文章
Vue前端導(dǎo)出Excel文件的詳細(xì)實現(xiàn)方案
在開發(fā)后臺管理系統(tǒng)的時候,很多地方都要用到導(dǎo)出excel表格,比如將table中的數(shù)據(jù)導(dǎo)出到本地,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)出Excel文件的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue報錯Failed to execute 'appendChild&apos
這篇文章主要為大家介紹了vue報錯Failed to execute 'appendChild' on 'Node'解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了分享Vue組件傳值的幾種常用方式，文章圍繞主題斬開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
通過vue.extend實現(xiàn)消息提示彈框的方法記錄
這篇文章主要給大家介紹了關(guān)于通過vue.extend實現(xiàn)消息提示彈框的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了VUE表達式{{}}中如何拼接字符問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue指令中的v-once用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
利用Vite搭建Vue3+ElementUI-Plus項目的全過程
vue3如今已經(jīng)成為默認(rèn)版本了,相信大多數(shù)公司已經(jīng)全面擁抱vue3了,下面這篇文章主要給大家介紹了關(guān)于利用Vite搭建Vue3+ElementUI-Plus項目的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要給大家介紹了關(guān)于vue-cli配置使用Vuex的相關(guān)資料,Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,本介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue中appear的用法,需要的朋友可以參考下2017-08-08
vite+vue3項目報錯：TypeError:?Promise.allSettled?is?not?a?fu
Vite+Vue3項目中遇到“TypeError:?Promise.allSettled?is?not?a?function”錯誤,通常是因為當(dāng)前運行的JavaScript環(huán)境不支持Promise.allSettled,下面就來介紹幾種解決方法,感興趣的可以了解一下2024-12-12