vue路由router傳引數方式

2021-10-14 15:19:06 字數 1429 閱讀 5632

params、query是什麼?

params:/router1/:id ,/router1/123,/router1/789 ,這裡的id叫做params

query:/router1?id=123 ,/router1?id=456 ,這裡的id叫做query。

this

.$router.

push(`

})// 或者使用路由的name

this

.$router.

push(}

)//注意:params傳參,push裡面只能是 name:'***x',不能是path:'/***',因為params只能用name來引入路由,如果這裡寫成了path,接收引數頁面會是undefined!!!

// 你使用params方法傳參的時候,要在路由後面加引數名,並且傳參的時候,引數名要跟路由後面設定的引數名對應 '/about/:id'。使用query方法,就沒有這種限制,直接在跳轉裡面用就可以

// 注意:如果路由上面不寫引數,也是可以傳過去的,但不會在url上面顯示出你的引數,並且當你跳到別的頁面或者重新整理頁面的時候引數會丟失(如下圖所示),那依賴這個引數的http請求或者其他操作就會失敗。

// 在路由中配置

// 接收引數

this

.$route.params

this

.$router.

push(}

)// 路由配置

// 接收引數

this

.$route.query

// 通過query傳遞

"div"

:to=

"}">

<

/router-link>

//通過router-link在路由上加上query,然後通過query,獲取資料

let id =

this

.$route.query.id;

//注意:如果router-link的to屬性指向本頁面,需要在watch中監聽路由的變化$route,然後呼叫函式請求資料,不然頁面資料不會主動重新整理

我們在定義路由規則的時候,可以傳遞props屬性,屬性值有兩種情況

第一種:屬性值是true

會將動態路由資料傳遞給元件

第二種:屬性值是函式

引數是$route資料物件

返回值表示給元件傳遞的資料

我們在元件中,通過props屬性去接收這些資料(類似父元件向子元件通訊)

}},// 我們在元件中,通過props屬性去接收這些資料(類似父元件向子元件通訊)

props:

['page'

,'path'

,'hash'

,'color'

],

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

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

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

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

vue路由跳轉傳引數

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