快捷導(dǎo)航

vue路由三種傳參方式詳細(xì)講解

更新時(shí)間：2023年10月11日 09:34:41 作者：不及你笑靨如花

在Vue中有多種方式可以進(jìn)行路由跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要給大家介紹了關(guān)于vue路由三種傳參方式的相關(guān)資料,文中介紹的方法分別包括params傳參、query傳參(顯示傳參)以及props傳參(路由組件傳參),,需要的朋友可以參考下

一、params傳參

1.1 顯示參數(shù)（動(dòng)態(tài)路由匹配）

很多時(shí)候，我們需要將給定匹配模式的路由映射到同一個(gè)組件。例如，我們可能有一個(gè) Search組件，它應(yīng)該對(duì)所有用戶進(jìn)行渲染，但查找的關(guān)鍵字不同。在 Vue Router 中，我們可以在路徑中使用一個(gè)動(dòng)態(tài)字段來(lái)實(shí)現(xiàn)，我們稱之為路徑參數(shù) 。

（1）在開(kāi)始傳參前，需要子路由提前配置好參數(shù)。比如:keyword。

ps:

url中的參數(shù)需要用冒號(hào) : 表示。當(dāng)一個(gè)路由被匹配時(shí)，它的 params 的值將在每個(gè)組件中以 this.$route.params 的形式暴露出來(lái)。
因?yàn)閰?shù)在url路徑上顯示，所以當(dāng)我們刷新時(shí)，參數(shù)依舊保留

//子組件
    {
        path: '/Search/:keyword',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true }
    }

（2）傳參分為聲明式傳參和編程式傳參

聲明式傳參：該方式是通過(guò) router-link 組件的to屬性實(shí)現(xiàn)，該方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。

//父路由組件
<router-link :to="/Search/123">進(jìn)入搜索頁(yè)面</router-link>

編程式傳參:該方式是通過(guò) this.$router.push屬性實(shí)現(xiàn)。

（a）字符串的形式傳參

//父路由編程式傳參(一般通過(guò)事件觸發(fā))
this.$router.push({
    path:'/Search/${keyword}',
})

（b）對(duì)象形式傳參(路由必須要有別名name)

//父路由編程式傳參
 this.$router.push({
      name: "Search",
      params: { keyword: this.keyword },//這種方式的傳參必須要有路由的別名name
   });

注意項(xiàng)：

（1）params傳參如何做到可傳可不傳？在子組件的參數(shù)路徑后面加上?，采用正則表達(dá)式

{
        path: '/Search/:keyword?',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true }
    }

（2）params傳參如何傳空字符？

在父組件傳參的時(shí)候，給參數(shù)加上判斷。如果是空字符，則傳入undefined

 this.$router.push({
        name: "Search",
        params: { keyword: this.keyword || undefined },
      });

1.2 不顯示參數(shù)

注意：當(dāng)params不在路由上時(shí)，參數(shù)為不可見(jiàn)。但是當(dāng)我們刷新頁(yè)面是，參數(shù)會(huì)消失。

params 傳參（不顯示參數(shù)）也可分為 聲明式 和 編程式 兩種方式，與前面不同的是，這里是通過(guò)路由的別名 name 進(jìn)行傳值的，并且子路由不需要配置參數(shù)。

聲明式傳參：該方式是通過(guò) router-link 組件的to屬性實(shí)現(xiàn)，比如：

//父路由組件
<router-link :to="{name:'Search',params:{keyword:123}}">進(jìn)入搜索頁(yè)面</router-link>

編程式傳參:該方式是通過(guò) this.$router.push屬性對(duì)象方式實(shí)現(xiàn)。

//父路由編程式傳參
 this.$router.push({
      name: "Search",
      params: { keyword: this.keyword },//這種方式的傳參必須要有路由的別名name
   });

1.3 獲取傳參

在子路由中可以通過(guò)下面代碼來(lái)獲取傳遞的參數(shù)值

this.$route.params.keyword

二、query傳參（顯示傳參）

2.1 傳參

**注意：query傳參在路徑上以?關(guān)鍵字=**的形式存在，刷新頁(yè)面，數(shù)據(jù)保留

聲明式傳參：該方式是通過(guò) router-link 組件的to屬性實(shí)現(xiàn)，需要子路由提前配置好路由別名（name 屬性）。比如：

//父路由組件
<router-link :to="{name:'Search',query:{keyword:123}}">進(jìn)入搜索頁(yè)面</router-link>

編程式傳參:

（1）該方式是通過(guò) this.$router.push屬性對(duì)象方式實(shí)現(xiàn)。

//父路由編程式傳參
 this.$router.push({
      name: "Search",
      query: { keyword: this.keyword },//這種方式的傳參必須要有路由的別名name
   });

（2）路徑傳參

 this.$router.push(`/Search?k=${this.keyword}`);

2.2 獲取傳參

在子路由中可以通過(guò)下面代碼來(lái)獲取傳遞的參數(shù)值

this.$route.query.keyword

三、props傳參（路由組件傳參）

3.1、布爾模式

當(dāng)props設(shè)置為true時(shí)，route.params將被設(shè)置為組件的props。這種情況下，只能傳params參數(shù)。

//子路由
 {
        path: '/Search/:keyword?',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true },
        props: true
    }

3.2、對(duì)象模式

當(dāng)props是一個(gè)對(duì)象時(shí)，它將原樣設(shè)置為組件props。

{
        path: '/Search/:keyword?',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true },
        props: { a: 1, b: 2 } //定義a和b兩個(gè)變量
    }

3.3、函數(shù)模式

你可以創(chuàng)建一個(gè)返回props的函數(shù)。這允許你將參數(shù)轉(zhuǎn)換為其他類型，將靜態(tài)值與基于路由的值相結(jié)合等等。

 {
        path: '/Search/:keyword?',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true },
        props: route => ({ k: route.query.keyword, keyword: route.params.keyword })
    }

3.4、獲取參數(shù)

//首先在父路由里面設(shè)置路由跳轉(zhuǎn)
this.$router.push({
        name: "Search",
        params: { keyword: this.keyword || undefined },
        query: { k: this.keyword.toUpperCase() },
      });
//然后給子路由的路徑配置里面加上props
{
        path: '/Search/:keyword?',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true },
        props: route => ({ k: route.query.k, keyword: route.params.keyword })
    }

最后我們可以在子頁(yè)面中通過(guò)props獲取參數(shù)