vue路由傳參及獲取參數(shù)的方式總結(jié)
vue路由傳參及獲取參數(shù)方式
方法一
動態(tài)路由（這里用來測試，傳了兩個參數(shù)username和post_id）
//路由配置
{
? ?? ?path: '/user/:username/:post_id',
? ??? ?name: 'User',
? ??? ?component: User
?}//跳轉(zhuǎn)
?? ?this.$router.push({
? ? ??? ? path: `/user/${username}/${post_id}`,
? ? })匹配路徑：/user/evan/123
傳遞的參數(shù)：{ username: 'evan', post_id: '123' }
//獲取參數(shù) this.$route.params.username this.$route.params.post_id
方法二
通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù)。
//路由配置
{
? ?? ?path: '/user',
? ??? ?name: 'User',
? ??? ?component: User
?}//js跳轉(zhuǎn)
?? ?this.$router.push({
? ? ??? ? name: 'User',
? ? ??? ? params: {
? ? ? ? ? ? id: id
? ? ? ? ? }
? ? })<!--html跳轉(zhuǎn)-->
<router-link :to="{name:'User',params:{id:3}}"><span>跳轉(zhuǎn)</span></router-link>js獲取參數(shù)：this.$route.params.id
html獲取參數(shù)： {{$route.params.id}}
方法三
使用path來匹配路由，然后通過query來傳遞參數(shù)，參數(shù)顯示在地址欄上，并用?號和&號拼接的
//路由配置
{
? ?? ?path: '/user',
? ??? ?name: 'User',
? ??? ?component: User
?}//js跳轉(zhuǎn)
?? ?this.$router.push({
? ? ??? ? ?path: '/user',
? ? ? ? ? query: {
? ? ? ? ? ? id: id
? ? ? ? ? }
? ? })<!--html跳轉(zhuǎn)--> <router-link to="/user?id=1"><span>跳轉(zhuǎn)</span></router-link>
js獲取參數(shù)：this.$route.query.id
html獲取參數(shù)： {{$route.query.id}}
- 參數(shù)是對象的時候使用params傳參
- 參數(shù)是字符串拼接的時候使用query傳參
vue路由傳遞參數(shù)，刷新頁面后參數(shù)丟失
在用vue做項目的時候，發(fā)現(xiàn)在新頁面刷新后，上一頁面帶過來的參數(shù)會丟失，查閱資料才發(fā)現(xiàn)原來自己對params和query理解不透徹
下面是兩種傳參方法：
1.用 params 傳參
需要路由里加上這個參數(shù)
this.$router.push({name:'list', params:{id: id}});
routes: [
? ? {
? ? ? path: '/list/:id',
? ? ? name: 'list'
? ? }
? ]可以通過 this.$route.params.id 來獲取
2.可以將參數(shù)寫到路徑里
this.$router.push({path: '/folder/file', query: {id: list.id, name: list.name}})可以通過 this.$route.query.id 來獲取
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue使用element?plus組件時出現(xiàn)時間格式問題的解決方法,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考下2025-07-07
詳解vue的數(shù)據(jù)劫持以及操作數(shù)組的坑
這篇文章主要介紹了vue的數(shù)據(jù)劫持以及操作數(shù)組的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在Vue.js3中,組件通信主要包括父子組件通信、兄弟組件通信以及祖孫組件通信,這篇文章主要介紹了Vue3組件通信具體用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09
vue使用less報錯:Inline JavaScript is not ena
這篇文章主要介紹了vue使用less報錯:Inline JavaScript is not enabled問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家詳細(xì)介紹了Vue中給對象添加新屬性后界面不刷新的原理與解決方案,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-11-11
Vue reactive函數(shù)實現(xiàn)流程詳解
一個基本類型的數(shù)據(jù),想要變成響應(yīng)式數(shù)據(jù),那么需要通過ref函數(shù)包裹,而如果是一個對象的話,那么需要使用reactive函數(shù),這篇文章主要介紹了Vue reactive函數(shù)2023-01-01
前端Vue3圖像編輯功能實現(xiàn)代碼(并生成mask圖)
隨著互聯(lián)網(wǎng)的飛速發(fā)展,圖片編輯已經(jīng)成為人們?nèi)粘Ｉ钪薪?jīng)常使用的一項技能,下面這篇文章主要介紹了前端Vue3圖像編輯功能實現(xiàn)的相關(guān)資料,并生成mask圖,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09
vue 自定義指令directives及其常用鉤子函數(shù)說明
這篇文章主要介紹了vue 自定義指令directives及其常用鉤子函數(shù)說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue3 defineProps設(shè)置默認(rèn)值報錯問題及解決過程
這篇文章主要介紹了Vue3 defineProps設(shè)置默認(rèn)值報錯問題及解決過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-08-08
這篇文章主要介紹了vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07