vue路由傳參的基本實現方式小結 三種方式

這篇文章主要介紹了vue路由傳參的基本實現方式,結合例項形式總結分析了vue.js路由傳參的三種實現方式,包括params顯示傳參、不顯示引數以及query顯示引數傳參,需要的朋友可以參考下

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

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

①,宣告式router-link

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

//子路由配置

//父路由元件
"/child/123"
>進入child路由<
/router-link>

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

//子路由配置

//父路由程式設計式傳參(一般通過事件觸發)
this.$router.
push('
,})

this.$route.params.id

①,宣告式router-link

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

"}">進入child路由<

/router-link>

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

//子路由配置

//父路由程式設計式傳參(一般通過事件觸發)
this.$router.
push(}
)

this.$route.params.id

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

①,宣告式router-link

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

//子路由配置

//父路由元件
"}">進入child路由<
/router-link>

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

//子路由配置

//父路由程式設計式傳參(一般通過事件觸發)
this.$router.
push(}
)

this.$route.query.id

vue路由傳參的幾種基本方式

現有如下場景，點選父元件的li元素跳轉到子元件中，並攜帶引數，便於子元件獲取資料。父元件中 for article in articles click getdescribe article.id methods getdescribe id 方案一，需要對應路由配置如下 很顯然，需要在path中新...

vue路由傳參的幾種基本方式

1 動態路由 頁面重新整理資料不丟失 methods 路由配置 接收頁面通過 this.route.params.id 接收 this.route.params.id 2 路由 name 匹配，通過params傳參 methods 路由配置 也是通過 this.route.params.id 接收引...

vue路由傳參的三基本方式

場景 點選當前頁的某個按鈕跳轉到另外乙個頁面去，並將某個值帶過去 三種基本方式 1 頁面重新整理資料不會丟失 methods 需要對應路由配置如下 需要在path中新增 id來對應 router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值 另外頁面獲取引數如下 this.r...