是不是經(jīng)常會(huì)有這樣的情況，兩個(gè)組件的內(nèi)容基本一致，比如下面這樣：

最簡(jiǎn)單的方式可以直接用兩個(gè)組件，邏輯完全分開，好配置好操作，就是代碼重復(fù)的多。

這樣的情況，建議用一個(gè)組件，通過路由的配置，最大程度實(shí)現(xiàn)代碼的重用，操作過程如下：

children: [ { path: 'checked', name: 'checked', component: () => import('../views/user/index.vue'), meta: { title: '正式用戶', icon: '' } }, { path: 'unchecked', name: 'unchecked', component: () => import('../views/user/index.vue'), meta: { title: '未審核用戶', icon: '' } } ]

經(jīng)過上面的配置，我們的兩個(gè)路徑 checked 和 unchecked 都會(huì)訪問同一個(gè) vue 組件。

后面要解決的就是如何在組件內(nèi)對(duì)這兩個(gè)路徑進(jìn)行區(qū)分(此時(shí)組件的 mounted() 鉤子只能執(zhí)行一次)，以便從后臺(tái)得到正確的數(shù)據(jù)和組件內(nèi)顯示正確的內(nèi)容，可以這樣搞：

// 方法1，用 watchwatch: { $route: { immediate: true, handler(to, form) { // TODO } }}// 方法2，給 加 key，此方式可以讓組件的 mounted() 鉤子正常觸發(fā)

還可以在路由中配置參數(shù)的方式，形如 /user/:type，這樣的情況和上面的類似，組件也會(huì)被重用進(jìn)而導(dǎo)致生命周期鉤子不被觸發(fā)的情況，因?yàn)轭愃?#xff0c;放一起說說：

// /user/:type 方式配置的路由，可以用上面的方法，也可以如下，在組件內(nèi)寫一個(gè)導(dǎo)航守衛(wèi)beforeRouteUpdate(to, from, next) { next();}

總結(jié)：工作中遇到問題的一個(gè)小結(jié)，只解決了組件公用后生命周期鉤子不能觸發(fā)帶來的問題，業(yè)務(wù)邏輯自行安排，僅供參考！

總結(jié)

以上是生活随笔為你收集整理的vue @路径_Vue路由多路径配置同一个组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。