7 路由元件傳參

2021-10-03 08:46:23 字數 1260 閱讀 6634

學習vue-router的一些學習筆記，所有筆記內容請看 vue-router學習筆記

const user=}'


}const router=


newvuerouter(]


})
如上述所示，在元件中直接使用$route，會與當前的路由形成高度耦合，則元件user就只能在此url上使用，不能進行復用。

通過使用props進行解耦：

const user=}'


}const router =


newvuerouter


(// 對於包含命名檢視的路由，必須為每個命名檢視新增props選項


,            props:}]


})
如果props是乙個物件時，它會被原樣設定為元件的屬性**，只有當路由是靜態路由時才起作用**，即path中沒有動態路徑引數 。

const router=


newvuerouter(}


]})
可以建立乙個函式返回props，這樣可以將引數轉換成另一種型別，將靜態值與其路由的值結合起來等：

const router =


newvuerouter(}


})
上述props的作用，是將/search?q=vue中的q=vue轉換成物件，作為屬性傳遞給searchuser 元件。

具體示例：

import vue from


'vue'


import vuerouter from


'vue-router'


import hello from


'./hello.vue'


vue.


use(vuerouter)


function


dynamicpropsfn


(route)


}const router =


newvuerouter(,


// no props, no nothing


// 動態路由，props傳遞route.param到元件


,// pass route.params to props


// 靜態路由，props傳遞物件到元件},


// static values,}


]})new


vue().


$mount


()

vuecli3路由傳參的方式

路由傳參的三種方式 1，params方式傳參 想要使用params傳參首先要配置路由 這個是配置子元件 父元件中 to about id params方式傳參router link 子元件中接受呼叫父元件傳給的資料 使用this.route.id 就可以獲取到傳給的引數了 params傳參方式收到的...

Vue Router 路由元件傳參

在元件中使用 route 會使之與其對應路由形成高度耦合，從而使元件只能在某些特定的 url 上使用，限制了其靈活性。使用 props 將元件和路由解耦 取代與 route 的耦合 const user const router new vuerouter 通過 props 解耦 const use...

vue傳參，元件之間傳參 路由傳參 vuex

詳見 兩種情況 params 和 query 都可以在目標元件的生命週期裡，通過 this.route 進行獲取 例 首頁中精選主題的路由傳參 精選主題 1 簡單舉例 a 一般會新建 store 資料夾，在 index.js 初始化 vuex b 在 main.js 中，引入 c 例如，在我的頁面修...