Vue Router 路由元件傳參

2021-10-01 17:08:39 字數 978 閱讀 5514

在元件中使用 $route 會使之與其對應路由形成高度耦合,從而使元件只能在某些特定的 url 上使用,限制了其靈活性。

使用 props 將元件和路由解耦:

取代與 $route 的耦合

const user = }'}

const router = new vuerouter(

]})

通過 props 解耦

const user = }'}

const router = new vuerouter(,

// 對於包含命名檢視的路由,你必須分別為每個命名檢視新增 `props` 選項:

,props:

}]})

這樣你便可以在任何地方使用該元件,使得該元件更易於重用和測試。

布林模式

如果 props 被設定為 true,route.params 將會被設定為元件屬性。

物件模式

如果 props 是乙個物件,它會被按原樣設定為元件屬性。當 props 是靜態的時候有用。

const router = new vuerouter( }

]})

函式模式

你可以建立乙個函式返回 props。這樣你便可以將引數轉換成另一種型別,將靜態值與基於路由的值結合等等。

const router = new vuerouter() }

]})

url /search?q=vue 會將 作為屬性傳遞給 searchuser 元件。

請盡可能保持 props 函式為無狀態的,因為它只會在路由發生變化時起作用。如果你需要狀態來定義 props,請使用包裝元件,這樣 vue 才可以對狀態變化做出反應。

VueRouter 路由傳參

語法 演示 首頁 路由配置 const routes 注釋 id 代表id是乙個變數,值會儲存在元件例項的 route.params上 在元件上取引數的值 let home 演示 methods 路由配置 const routes 注釋 id 代表id是乙個變數,值會儲存在元件例項的 route.p...

vue router路由傳參

vue router路由傳參有兩種方法 1 params傳參 2 query傳參 用params傳參,f5強制重新整理引數會被清空,用query傳參,由於引數適用路徑傳參的所以f5強制重新整理也不會被清空。傳參強烈建議適用string import articleindex from pages t...

vue router 路由傳參

路由傳引數。在很多時候我們需要路由上面傳遞引數,比如新聞列表頁,我們需要傳遞新聞id,給新聞詳細頁。1.新聞列表頁模板 我們訪問 news 001,跳轉到新聞詳細頁,展示001的這條新聞。2.新聞詳細頁元件準備 新聞詳細頁面 route.params.id獲取路由上的引數 在js裡定義路由元件 新聞...