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>//簡(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ù)，但是刷新頁面 后會(huì)丟失params中傳遞的數(shù)據(jù)
//router配置
const routes = [{
path: '/chat/:id/:name',
name: 'Chat',
component: Chat
}]設(shè)置動(dòng)態(tài)路由后導(dǎo)航欄顯示效果 ??此時(shí)，就算刷新頁面也不會(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ù)沒什么,但是對(duì)于敏感數(shù)據(jù)，比如 涉及到用戶敏感信息 ，用query就不好了。
- 我們可以用params方式傳遞參數(shù)，它不會(huì)把傳遞的參數(shù)顯示到導(dǎo)航欄中。
但是！
我們用 this.$route.params 獲取數(shù)據(jù)后。刷新頁面會(huì)丟失獲取到的數(shù)據(jù)，但我們不能保證說讓用戶不刷新吧。
<————刷新頁面后 params數(shù)據(jù)丟失
解決辦法
會(huì)Vuex的，別使用路由傳參了，直接把要傳遞的參數(shù)放到Vuex中它不香嗎？
然后通過mutations設(shè)置state中的變量。在跳轉(zhuǎn)后的頁面獲取Vuex中的變量
vuex的 store 中的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的，當(dāng)頁面刷新時(shí)，頁面會(huì)重新加載 vue 實(shí)例，vuex 里面的數(shù)據(jù)就會(huì)被重新賦值，這樣就會(huì)出現(xiàn)頁面刷新vuex中的數(shù)據(jù)丟失的問題。
如何解決不贅述了網(wǎng)上方法太多，點(diǎn)下面鏈接看吧
解決vuex中數(shù)據(jù)刷新頁面后數(shù)據(jù)丟失 ??點(diǎn)我
不想使用Vuex的，大致方法也在上圖中 ，可以使用 Storage 的方式來保存?zhèn)鬟f的參數(shù)。cookie也可以。
window.sessionStorage.setItem("tagUser", JSON.stringify(tag));
window.sessionStorage.getItem('tagUser')以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)的實(shí)例詳解(params/query)
- Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
- vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))
- Vue3使用vue-router如何實(shí)現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
- 如何處理vue router 路由傳參刷新頁面參數(shù)丟失
- vue router動(dòng)態(tài)路由設(shè)置參數(shù)可選問題
- vue-router路由參數(shù)刷新消失的問題解決方法
- 詳解vue-router2.0動(dòng)態(tài)路由獲取參數(shù)
- Vue Router中獲取路由傳遞過來的參數(shù)(方法詳解)
相關(guān)文章
下面小編就為大家分享一篇解決VUEX兼容IE上的報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
關(guān)于vue3?解決getCurrentInstance?打包后線上環(huán)境報(bào)錯(cuò)問題
這篇文章主要介紹了vue3?解決getCurrentInstance?打包后線上環(huán)境報(bào)錯(cuò)問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
Vue使用Cropper實(shí)現(xiàn)圖片裁剪功能
圖片裁剪功能無論是用戶頭像的裁剪,還是圖片內(nèi)容的精確調(diào)整,都成為了提升用戶體驗(yàn)的關(guān)鍵一環(huán),本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中集成并使用Cropper.js實(shí)現(xiàn)一個(gè)強(qiáng)大的圖片裁剪組件,需要的可以參考下2024-11-11
這篇文章主要介紹了vue-cli3 從搭建到優(yōu)化的詳細(xì)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
眾所周知在vue移動(dòng)端h5頁面當(dāng)中,適配是經(jīng)常會(huì)遇到的問題,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目適配大屏端的相關(guān)資料,需要的朋友可以參考下2021-08-08
在Vue中實(shí)現(xiàn)對(duì)文件的壓縮和解壓縮功能
在前端開發(fā)中,文件的壓縮和解壓縮是經(jīng)常需要用到的功能,尤其是在需要上傳和下載文件的場(chǎng)景下,文件壓縮可以減小文件大小,加快文件傳輸速度,提高用戶體驗(yàn),本文將介紹在Vue項(xiàng)目中如何進(jìn)行文件的壓縮和解壓縮,需要的朋友可以參考下2023-11-11
本文主要介紹了vue3插件json2ts的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
最近做項(xiàng)目遇到這樣的需求,需要上傳的文件格式必須是pdf格式,方便我們查看,本文給大家分享element上傳文件對(duì)格式限制的處理方案,感興趣的朋友一起看看吧2024-02-02
vue 監(jiān)聽窗口變化對(duì)頁面部分元素重新渲染操作
這篇文章主要介紹了vue 監(jiān)聽窗口變化對(duì)頁面部分元素重新渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文主要介紹了Vue3中使用vuex4的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06