是不是經常會有這樣的情況，兩個組件的內容基本一致，比如下面這樣：

最簡單的方式可以直接用兩個組件，邏輯完全分開，好配置好操作，就是代碼重復的多。

這樣的情況，建議用一個組件，通過路由的配置，最大程度實現(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: '' } } ]

經過上面的配置，我們的兩個路徑 checked 和 unchecked 都會訪問同一個 vue 組件。

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

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

還可以在路由中配置參數(shù)的方式，形如 /user/:type，這樣的情況和上面的類似，組件也會被重用進而導致生命周期鉤子不被觸發(fā)的情況，因為類似，放一起說說：

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

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

總結

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

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