Vue路由傳參的三種方式實(shí)例詳解
Vue路由傳參三種方式
- params傳參
- 路由屬性配置傳參
- query傳參
一、params傳參
this.$router.push({
name:"admin",
//這里的params是一個(gè)對(duì)象，id是屬性名，item.id是值(可以從當(dāng)前組件或者Vue實(shí)例上直接取)
params:{id:item.id}
})
//這個(gè)組件對(duì)應(yīng)的路由配置
{
//組件路徑
path: '/admin',
//組件別名
name: 'admin',
//組件名
component: Admin,
}
通過params傳遞參數(shù)，如果我們想獲取 id 的參數(shù)值，可以通過this.$route.params.id這種方式來打印出來就可以得到了；
注意：獲取參數(shù)的時(shí)候是 $route，跳轉(zhuǎn)和傳參的時(shí)候是 $router
二、路由屬性配置傳參：
this.$router.push({
name:"/admin/${item.id}",
})
//這個(gè)組件對(duì)應(yīng)的路由配置
{
//組件路徑
path: '/admin:id',
//組件別名
name: 'admin',
//組件名
component: Admin,
}
通過路由屬性配置傳參我們可以用this.$route.params.id來獲取到 id 的值，
注意 this. $router.push 方法里面路徑帶的是值，路由配置項(xiàng)那里帶的是變量名(屬性名)來實(shí)現(xiàn)的對(duì)應(yīng)；
以上兩種傳參方式基本上可以理解為 ajax 中的 post 請(qǐng)求方式，參數(shù)都是不可見的，但是上面兩種方法都有一個(gè)弊端，就是當(dāng)頁面刷新了是獲取不到參數(shù)值的，那么有沒有一種方法是頁面刷新之后參數(shù)依然存在呢？
三、query傳參
this.$router.push({
name:"/admin",
query:{id：item.id}
})
//這個(gè)組件對(duì)應(yīng)的路由配置
{
//組件路徑
path: '/admin',
//組件別名
name: 'admin',
//組件名
component: Admin,
}
第三種方式是用 query 來傳參，這種方式是可以解決頁面刷新參數(shù)消失問題的，這種方式可以理解為是 ajax 中的 get 方法，參數(shù)是直接在 url 后面添加的，參數(shù)是可見的，所以解決頁面刷新參數(shù)消失問題建議使用此方法來解決；
區(qū)別
（1）params傳參
- 只能用 name，不能用 path。
- 地址欄不顯示參數(shù)名稱 id，但是有參數(shù)的值。
（2）query傳參
- name 和 path 都能用。用 path 的時(shí)候，提供的 path 值必須是相對(duì)于根路徑的相對(duì)路徑，而不是相對(duì)于父路由的相對(duì)路徑，否則無法成功訪問。
- 地址欄顯示參數(shù)格式為?id=0&code=1
特別注意
route與router的區(qū)別。route表示路由屬性；router表示路由實(shí)例。
以上3種是路由傳參的基本方式。除了以上幾種還可以使用sessionStorage/localStorage/cookie進(jìn)行存儲(chǔ)也可以進(jìn)行存儲(chǔ)也可以，使用VUEX也行，具體因場(chǎng)景而異。
總結(jié)
到此這篇關(guān)于Vue路由傳參的三種方式的文章就介紹到這了,更多相關(guān)Vue路由傳參方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程
這篇文章主要介紹了Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程,正如其名，vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中：全局的，單個(gè)路由獨(dú)享的，或者組件級(jí)的2023-04-04
Vue 2.0在IE11中打開項(xiàng)目頁面空白的問題解決
這篇文章主要給大家介紹了關(guān)于Vue 2.0在ie 11中打開項(xiàng)目頁面空白問題的解決方法，文中詳細(xì)分析出現(xiàn)該問題的原因，并給出了詳細(xì)的解決方法，需要的朋友可以參考借鑒，下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
在前端開發(fā)中,除了通過 API 動(dòng)態(tài)請(qǐng)求的數(shù)據(jù)外,還有一些諸如 HTML 文件、圖片、字體等文件需要在項(xiàng)目中被用到,通常這些被視為靜態(tài)資源,本文將基于 Vite + React 來講述并解鎖 Vite 引用本地靜態(tài)資源的正確姿勢(shì),需要的朋友可以參考下2024-12-12
vue3在單個(gè)組件中實(shí)現(xiàn)類似mixin的事件調(diào)用
這篇文章主要為大家詳細(xì)介紹了vue3如何在單個(gè)組件中實(shí)現(xiàn)類似mixin的事件調(diào)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了vue中如何使用jest單元測(cè)試，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue中使用element-ui給按鈕綁定一個(gè)單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對(duì)話框
最近遇到了個(gè)需求是使用element-ui插件編寫頁面,點(diǎn)擊按鈕,彈出對(duì)話框,這篇文章主要給大家介紹了關(guān)于Vue中使用element-ui給按鈕綁定一個(gè)單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對(duì)話框的相關(guān)資料,需要的朋友可以參考下2022-11-11
本篇文章給大家分享了Vue取消eslint語法限制的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們可以參考學(xué)習(xí)下。2018-08-08
這篇文章主要介紹了Vue中如何實(shí)現(xiàn)字符串換行問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Cookbook組件形式：優(yōu)化 Vue 組件的運(yùn)行時(shí)性能
本文仿照Vue Cookbook 組織形式，對(duì)優(yōu)化 Vue 組件的運(yùn)行時(shí)性能進(jìn)行闡述。通過基本的示例代碼給大家講解，需要的朋友參考下2018-11-11
這篇文章主要介紹了vue常用組件之confirm用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09