vue 组件复用的两种方法以及el-tab-pane切换标签时如何重新触发钩子函数

当多个页面具有相同的页面模板时，想要共同同一个组件，有两种方法实现。

方法一

1.app.vue中 必须加上key属性，让每次进入路由时都重新触发钩子函数

<router-view :key="key" />

computed: {
   
    key() {
   
      // 只要保证 key 唯一性就可以了，保证不同页面的 key 不相同
      // console.log(this.$route.fullPath);
      return this.$route.fullPath
    }
  },

2.在index.js文件中： 让多个路由共同同一个组件，保证path和name属性具有唯一性 。

{
   
    path: '/role',
    name: 'role', //角色
    meta: {
   
      requireAuth: true //表示该路由需要登录验证后才能进入  在切换路径跳转路由之前作判断
    },
    component: () => 		
    import('@/views/policy/policy.vue'),
},
{
   
  path: '/strategy',
  name: 'strategy', //策略
  meta: {
   
    requireAuth: true