Vue路由多路径配置同一个组件

是不是经常会有这样的情况，两个组件的内容基本一致，比如下面这样：

Vue路由多路径配置同一个组件 Vue路由多路径配置同一个组件

最简单的方式可以直接用两个组件，逻辑完全分开，好配置好操作，就是代码重复的多。

这样的情况，建议用一个组件，通过路由的配置，最大程度实现代码的重用，操作过程如下：

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 组件。

后面要解决的就是如何在组件内对这两个路径进行区分（此时组件的 mounted() 钩子只能执行一次），以便从后台得到正确的数据和组件内显示正确的内容，可以这样搞：

// 方法1，用 watchwatch: {  $route: {       immediate: true,    handler(to, form) {      // TODO     }  }}// 方法2，给 <router-view> 加 key，此方式可以让组件的 mounted() 钩子正常触发<router-view :key="$route.fullPath"></router-view>

还可以在路由中配置参数的方式，形如 /user/:type，这样的情况和上面的类似，组件也会被重用进而导致生命周期钩子不被触发的情况，因为类似，放一起说说：

// /user/:type 方式配置的路由，可以用上面的方法，也可以如下，在组件内写一个导航守卫beforeRouteUpdate(to, from, next) {    next();}

总结：工作中遇到问题的一个小结，只解决了组件公用后生命周期钩子不能触发带来的问题，业务逻辑自行安排，仅供参考！