vue-router 路由傳參問題(路由傳參方式)
更新時間：2023年11月10日 10:49:00 作者：三知之靈
路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
需求描述
該問題是在希望在代碼實現(xiàn)路由跳轉(zhuǎn)的時候，傳遞一些數(shù)據(jù)，而且傳遞數(shù)據(jù)較多，并存在一些敏感數(shù)據(jù)
代碼環(huán)境
"vue": "^3.3.4", "vue-router": "^4.2.4"
vue-router 路由傳參
路由傳參主要有兩種方式：
- 一種是路徑傳參
- 參數(shù)比較容易泄漏，容易直接通過瀏覽器路徑看到相關(guān)參數(shù)
- 一種是參數(shù)傳遞
實踐問題
import { useRoute, useRouter } from "vue-router";
//控制路由跳轉(zhuǎn)
const router = useRouter();
router.push({path:"/user",query:{name:"fffff",age:18}})
router.push({path:"/user",params:{name:"fffff",age:18}})
//用于獲取路由參數(shù)
const route = useRoute();
console.log(route.query.name)//fffff
console.log(route.params.name)//undefined通過以上代碼，發(fā)現(xiàn)通過query方式傳遞參數(shù)確實可以拿到數(shù)據(jù)，但是該種方式會非常容易拿到路徑的參數(shù)，個人感覺安全性較差，三方拿到數(shù)據(jù)比較容易
所以有嘗試通過params方式傳遞參數(shù)，但是該種方式參數(shù)雖然不會出現(xiàn)在路徑上，但是拿不到參數(shù)？？？?。?！網(wǎng)上有些說是寫法不對,應(yīng)該使用name的方式控制路由跳轉(zhuǎn)并傳參，使用path的方式會忽略params：
router.push({name:"user",params:{name:"fffff",age:18}})但是實踐后發(fā)現(xiàn)，哪怕使用了name 方式 依然無法拿到params的參數(shù)，然后就說是vue-router的版本問題了，可能最新的版本存在問題
因為本人不想要進行版本回退，所以放棄了通過路由傳參，最終采用了通過 pinia(store) --維護全局數(shù)據(jù)的工具包的方式傳遞參數(shù)了
到此這篇關(guān)于vue-router 路由傳參問題的文章就介紹到這了,更多相關(guān)vue-router 路由傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在?Vue.js?中,組件通信是開發(fā)過程中非常重要的一部分,它涉及到不同組件之間的數(shù)據(jù)傳遞和交互,本文將介紹如何實現(xiàn)父子組件之間的有效通信,并盤點了常見的5種Vue組件通信方式總結(jié),需要的朋友可以參考下2024-03-03
本文主要介紹了vue拖拽添加的簡單實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
在之前的前端開發(fā)中，為了實現(xiàn)我們的需求，通常采用的方案是通過 JS/Jquery 直接操縱頁面的 DOM 元素，得益于 Jquery 對于 DOM 元素優(yōu)異的操作能力，我們可以很輕易的對獲取到的 DOM 元素進行操作。這篇文章主要介紹了Vue 中 ref 的使用 ,需要的朋友可以參考下2019-04-04
Vue的watch選項提供了多種方法來觀測數(shù)據(jù)屬性的變化,讓我們能夠編寫更加優(yōu)雅和維護性更高的代碼,本文給大家介紹Vue中watch的多種使用方法小結(jié),感興趣的朋友一起看看吧2023-10-10
Vue.js每天必學之數(shù)據(jù)雙向綁定，如何進行綁定，如何進行數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了Vue.component的屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細介紹了Vue2單一事件管理組件通信的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
vue實現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到
這篇文章主要介紹了vue實現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了WebPack配置vue多頁面的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
跨域問題的出現(xiàn)是因為瀏覽器的同源策略問題，如果沒有同源策略我們的瀏覽器將會十分的不安全，隨時都可能受到攻擊，今天小編通過本文給大家介紹下vue 處理跨域問題，感興趣的朋友一起看看吧2021-09-09