前言

vue 路由傳參的使用場景一般都是應用在父路由跳轉到子路由時，攜帶引數跳轉。傳參方式可劃分為 params 傳參和 query 傳參，而 params 傳參又可分為在 url 中顯示引數和不顯示引數兩種方式，這就是vue路由傳參的三種方式。

方式一：params 傳參（顯示引數）

params 傳參（顯示引數）又可分為 宣告式 和 程式設計式 兩種方式

1、宣告式 router-link

該方式是通過 router-link 元件的 to 屬性實現，該方法的引數可以是一個字串路徑，或者一個描述地址的物件。使用該方式傳值的時候，需要子路由提前配置好引數，例如：

//子路由配置
{
  path: '/child/:id',
  component: Child
}
//父路由元件
<router-link :to="/child/123">進入Child路由</router-link>

2、程式設計式 this.$router.push

使用該方式傳值的時候，同樣需要子路由提前配置好引數，例如：

//子路由配置
{
  path: '/child/:id',
  component: Child
}
//父路由程式設計式傳參(一般通過事件觸發)
this.$router.push({
    path:'/child/${id}',
})
 

在子路由中可以通過下面程式碼來獲取傳遞的引數值

this.$route.params.id

方式二：params 傳參（不顯示引數）

params 傳參（不顯示引數）也可分為 宣告式 和 程式設計式 兩種方式，與方式一不同的是，這裡是通過路由的別名 name 進行傳值的

1、宣告式 router-link

該方式也是通過 router-link 元件的 to 屬性實現，例如：

<router-link :to="{name:'Child',params:{id:123}}">進入Child路由</router-link>

2、程式設計式 this.$router.push

使用該方式傳值的時候，同樣需要子路由提前配置好引數，不過不能再使用 :/id 來傳遞引數了，因為父路由中，已經使用 params 來攜帶引數了，例如：

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由程式設計式傳參(一般通過事件觸發)
this.$router.push({
    name:'Child',
    params:{
    	id:123
    }
})

在子路由中可以通過下面程式碼來獲取傳遞的引數值

this.$route.params.id

注意：上述這種利用 params 不顯示 url 傳參的方式會導致在重新整理頁面的時候，傳遞的值會丟失

方式三：query 傳參（顯示引數）

query 傳參（顯示引數）也可分為 宣告式 和 程式設計式 兩種方式

1、宣告式 router-link

該方式也是通過 router-link 元件的 to 屬性實現，不過使用該方式傳值的時候，需要子路由提前配置好路由別名（name 屬性），例如：

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由元件
<router-link :to="{name:'Child',query:{id:123}}">進入Child路由</router-link>

2、程式設計式 this.$router.push

使用該方式傳值的時候，同樣需要子路由提前配置好路由別名（name 屬性），例如：

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由程式設計式傳參(一般通過事件觸發)
this.$router.push({
    name:'Child',
    params:{
    	id:123
    }
})

在子路由中可以通過下面程式碼來獲取傳遞的引數值

this.$route.query.id