vue-router两个不同的路由共用一个component的问题

遇到这样一个场景，即两个不同的路由，使用同一个组件，但是切换路由时无法触发mounted方法

如图

image.png

image.png

image.png

在路由中引用的相同组件

这时会遇到mounted无法触发的问题

遇到这种问题有以下两种方法

1. watch $route

在页面中watch $route来实现

watch: {
  '$route': function() {
    console.log(this.$route)
  }
}

但是这里有一个问题，就是页面第一次加载的时候，还是会触发mounted, 所以如果有在页面渲染时触发的逻辑，这里需要特殊处理一下

2. 设置 router-view 的 key 属性值为 $route.fullPath

<router-view :key="$route.fullPath"/>

image.png

设置key为$route.fullPath之后，由于两个路由的fullPath不同，组件会被强制不复用，所以将会回到正常流程，切换路由时mounted会被触发