vue的傳參方式和router使用技巧

2021-08-20 11:43:35 字數 1197 閱讀 7812

1,路由配置

2,使用方法

//

直接呼叫$router.push 實現攜帶引數的跳轉

this

.$router.push(`,

})

3,獲取方法(在describe頁面)

$route.params.id
使用以上方法可以拿到上個頁面傳過來的id值

1,路由配置

(這個地方預設配置就可以了,不用做任何的處理)

2,使用方法

this

.$router.push(

})

父元件中:通過路由屬性中的name來確定匹配的路由,通過params來傳遞引數。

3,獲取方法(在describe頁面)

$route.params.id
也用params獲取就可以了;

1,路由配置

(預設配置)

2,使用方法

this

.$router.push(

})

(params換成了query)

3,獲取方法(在describe頁面)

$route.query.id
(這個地方用query還獲取id,和前面用的params獲取的區別在於,用query獲取的id值會在url中有顯示,可以看到你傳過來的值)

(table-data這個地方可以隨便取名字,不是特定的值)

//這個是乙個普通元件,其中tabeldata可以是變數,也可以是常量,和pageinfo一樣樣,這裡打算傳遞兩個值過去,其實也可以用物件的方式傳過去都是可以的。

props: ['tabledata', 'pageinfo'],

data()

}

prop是單向繫結的,不應該在子元件內部改變prop。不過這裡的props傳過來的值會隨之父元件的值的改變而改變,是動態改變的。

1,$route.path

2,$route.params

乙個 key/value 物件,包含了動態片段和全匹配片段,如果沒有路由引數,就是乙個空物件。

3,$route.query

4,$route.hash

5,$route.fullpath

詳細請見(

VUE 路由router父子傳參的方式 路由傳參

vue 路由父子傳參的方式 方案一 getdescribe id 路由位址 方案一,需要對應路由配置如下 需要在path中新增 id來對應 router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值。子元件中 這樣來獲取引數 this.route.params.id 方案二 ...

vue路由router傳引數方式

params query是什麼?params router1 id router1 123,router1 789 這裡的id叫做params query router1?id 123 router1?id 456 這裡的id叫做query。this router.push 或者使用路由的name ...

Vue 路由 router 路由元件傳參 (重點)

為什麼要用路由元件傳參呢?在元件中使用 route會使之與其對應路由形成高度耦合,從而使元件只能在某些特定的url上使用,限制了靈活性。通過props來解耦。布林模式 如果 props 被設定為 true,route.params 將會被設定為元件屬性。核心 const position let r...