第vue路由傳參的基本實(shí)現(xiàn)方式小結(jié)

本文實(shí)例講述了vue路由傳參的基本實(shí)現(xiàn)方式。分享給大家供大家參考，具體如下：

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

方式一：params傳參（顯示參數(shù)）

params傳參（顯示參數(shù)）又可分為聲明式和編程式兩種方式

1、聲明式router-link

該方式是通過router-link組件的to屬性實(shí)現(xiàn)，該方法的參數(shù)可以是一個字符串路徑，或者一個描述地址的對象。使用該方式傳值的時候，需要子路由提前配置好參數(shù)，例如：

//子路由配置

path:/child/:id,

component:Child

//父路由組件

router-link:to=/child/123進(jìn)入Child路由/router-link

2、編程式this.$router.push

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

//子路由配置

path:/child/:id,

component:Child

//父路由編程式傳參(一般通過事件觸發(fā))

this.$router.push({

path:/child/${id},

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

this.$route.params.id

方式二：params傳參（不顯示參數(shù)）

params傳參（不顯示參數(shù)）也可分為聲明式和編程式兩種方式，與方式一不同的是，這里是通過路由的別名name進(jìn)行傳值的

1、聲明式router-link

該方式也是通過router-link組件的to屬性實(shí)現(xiàn)，例如：

router-link:to={name:Child,params:{id:123}}進(jìn)入Child路由/router-link

2、編程式this.$router.push

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

//子路由配置

path:/child,

name:Child,

component:Child

//父路由編程式傳參(一般通過事件觸發(fā))

this.$router.push({

name:Child,

params:{

id:123

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

this.$route.params.id

注意：上述這種利用params不顯示url傳參的方式會導(dǎo)致在刷新頁面的時候，傳遞的值會丟失

方式三：query傳參（顯示參數(shù)）

query傳參（顯示參數(shù)）也可分為聲明式和編程式兩種方式

1、聲明式router-link

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

//子路由配置

path:/child,

name:Child,

component:Child

//父路由組件

router-link:to={name:Child,query:{id:123}}進(jìn)入Child路由/router-link

2、編程式this.$router.push

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

//子路由配置

path:/child,

name:Child,

component:Child

//父路由編程式傳參(一般通過事件觸發(fā))

this.$router.push({

name:Child,

params: