Vue 路由2 給路由傳參

2021-10-01 15:31:24 字數 2059 閱讀 6208

實質

在url中通過 ? 給路由對應的元件傳遞引數的方式,vue例項會將傳遞的引數放在$route.query物件中。

注意:通過?的方式傳遞引數時,不用修改路由例項中的routes中物件的path路徑

在path對應元件中通過 this.$route.query.引數 來獲取傳遞的引數

這種傳參方式的引數可以不傳,仍然可以訪問到對應元件

**示例

lang

="en"

>

>

charset

="utf-8"

>

src=

"../lib/vue.js"

>

script

>

src=

"../lib/vue-router.js"

>

script

>

head

>

>

>

"/login?name=seven"

>

登入router-link

>

"/register"

>

註冊router-link

>

>

router-view

>

div>

>

// 1.定義元件模板

// 通過$route.query獲取傳過來的引數

var login =

var register =

// 2.定義路由例項

var router =

newvuerouter(,

]})var vm =

newvue(,

methods:

, router // 3.註冊路由,該寫法相當於 router: router})

script

>

body

>

html

>

實質

通過 : 給路由對應的元件傳遞引數的方式,vue例項會通過 $route.matched中的正規表示式解析url,然後將引數放入 $route.params中。

注意:用 : 的方式傳遞引數,要修改路由中的path路徑

在path對應的元件中通過$route.params.引數來獲取引數

這種傳遞方式需要完全匹配path路徑,即一定要傳遞引數,否則訪問不到該對應元件

**示例

lang

="en"

>

>

charset

="utf-8"

>

src=

"../lib/vue.js"

>

script

>

src=

"../lib/vue-router.js"

>

script

>

head

>

>

>

"/login/seven/123"

>

登入router-link

>

"/register"

>

註冊router-link

>

>

router-view

>

div>

>

// 1.建立元件模板物件

// 通過$route.params來獲取引數

var login =

var register =

// 2.建立路由例項

var router =

newvuerouter(,

// 注意:路徑後要用:來說明要傳遞的引數]}

)var vm =

newvue(,

methods:

, router // 3.註冊路由})

script

>

body

>

html

>

Vue路由傳參

getdescribe id 方案一,需要對應路由配置如下 很顯然,需要在path中新增 id來對應 rou ter.push 中pat h攜帶的 引數。在 子元件中 可以使用 來獲取傳 遞的引數 值。th is router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值。t...

vue路由傳參

傳參方式一 router link方式 1.path 是要跳轉的路由路徑,也可以是路由檔案裡面配置的 name 值,兩者都可以進行路由導航 2.params 是要傳送的引數,引數可以直接key value形式傳遞 3.query 是通過 url 來傳遞引數的同樣是key value形式傳遞 2,3兩...

Vue 路由傳參

需求 獲取傳遞引數 login 11314555 路由傳參 router link loginbyid 11314555 路由傳參 button 方式一 路由配置 需要在path中新增 id 來對應 router.push 中path攜帶的引數 呼叫方法 loginbyid id 引數獲取 this...