Vue 中不同的路由映射到同一组件，切换时如何处理？

背景

在真实的业务场景中，会遇到很多different router the same component vue 的情况。在这种情况下，对于同一个组件而言，在路由切换过程中，默认情况下，Vue是不会再次触发生命周期函数（例如created、mounted等）。这是因为在组件切换时，Vue 会尝试复用已经创建的组件实例，以提高性能并减少不必要的开销。

那如果希望在切换时能重新触发created、mounted周期函数，如何解决这个问题呢？

方案一：router-view 上加上一个唯一的key 值

在 <router-view> 上添加 key属性可以改变Vue 在切换路由时处理组件的行为。当切换路由时，如果 <router-view> 的 key 值发生变化，Vue将会销毁旧的组件实例并创建一个新的组件实例，从而触发组件的重新创建过程，包括 created 和 mounted 生命周期钩子的执行。

添加key属性的方式如下：

js 复制代码

<!-- 在模板中使用 router-view 并添加 key 属性 --> 
<router-view :key="key"></router-view>

computed: { 
    key() { 
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date() 
    }
 }

在上述示例中，为没有路由的key值加上了时间戳，这样在每次路由切换时，都会触发key值的改变，从而触发组件的重新创建过程。如果希望在某些情况下确保组件的created 和 mounted在切换时仍然能被触发，可以考虑使用 <router-view> 的 key 属性。

但有点注意的是，这种强制创建组件实例可能会增加一些性能开销，因为每次切换都会销毁和重新创建组件。

方案二：使用watch监听

使用watch监听路由的变化，可以在同一个组件切换时触发特定的逻辑，包括生命周期函数。通过监听$route对象的变化，可以在路由发生变化时执行相应的操作。

在Vue中，可以在组件的watch 选项中监听$route，并在watch回调函数中执行相应的逻辑。无论是从不同路由切换到同一组件，还是同一个路由下的切换，都会触发watch的回调函数。

js 复制代码

export default {
  watch: {
    $route(to, from) {
      // 在路由切换时执行特定的逻辑，例如调用created和mounted函数
      this.created();
      this.mounted();
    }
  },
  created() {
    console.log('Component created.');
    // 其他created逻辑
    // 页面数据刷新等操作
  },
  mounted() {
    console.log('Component mounted.');
    // 其他mounted逻辑
    // 页面数据刷新等操作
  }
};