vue中多路由公用一个页面组件时，数据缓存，第一次进入对应路由页面加载完成之后，重新进入应用此组件的路由时，页面数据被缓存

前两天做项目遇到一个需求，四个页面需要公用一个页面，只不过路由不相同，刚开始做的时候想的不是很全面，觉得根据对应菜单栏的点击事件就可以进入到对应的页面，而且每次进入页面应该会执行actived,mounted构造函数。直到写完对应的逻辑处理之后，才发现这是一个错误的想法！！！

记住:vue中就算跳的是同一个页面，路由不一样，那这个页面就只会在第一次进入的时候挂载，之后访问此页面都是走的缓存数据！！！

针对此bug的出现，在网上查了相关资料之后，就目前这两种方法解决起来比较快速且容易

方法一：唯一key值

在这里插入代码片
1.在app.vue文件中：
<router-view  :key="key" /> // 必须加上key属性，这样每次进入页面时此页面对应的钩子函数才会都重新触发
computed: {
    key() {
      return this.$route.fullPath //保证 key 唯一性就可以了，保证不同页面的 key 不相同
    }
 },
 2.在index.js文件中，让多个路由共用同一个组件，路径指向同一个组件。保证路由path和name属性具有唯一性 
   {
    path: '/RiskFactorsManagement',
    name: 'RiskFactorsManagement',
    component: () => import('../views/factor/RiskFactorsManagement.vue')
  },
  // 评估评价因子管理
  {
    path: '/EvaluationfactorManagement',
    name: 'EvaluationfactorManagement',
    component: () => import('../views/factor/RiskFactorsManagement.vue')
  },

多个页面公用同一个组件时：通过以上方法，会使得切换所有子组件都重新渲染相应子组件。
如果父组件下只有A B 组件需要共用，还有C D组件不需要公用，切换C D组件也同样会重新渲染C D ，影响性能。
并且每次切换路由会闪烁一下。因为切换后所有钩子函数都重新触发了。

方法二：通过监听路由的方法来重新触发钩子函数

1.在对应的组件页面中利用watch监听路由：
  watch:{
    $route: {
      handler:'handle', // 因为页面路由不同，所以每次进入页面都会触发监听方法
      deep:true // 深度监听
    }
  },
2.在methods方法中
methods:{
    handle() {
        if(this.$route.fullPath=='/RiskFactorsManagement'){
            //在这里获取并处理该路由下所需要的数据。
        }
}

**以上两种方案均可，但是相比第一种方案，这里我更加倾向于于第二种方案**