Vue多个路由共用同一组件时，互相切换时更新组件

在Vue中切换路径时，如果下一个路由与当前页面共用同一个组件，Vue会复用当前组件，不会重新创建一个。这就导致组件的生命周期函数如mounted, created等不会被触发，页面看起来就像什么都没发生一样。 在vue-router 2.2版本之后，可以使用beforeRouteUpdate这个导航守卫来监听同一个路由更新参数时的情况，但这个守卫并不会在不同路由共用同一组件时触发。 举例来说，有下面这一组路由：

const route = [
  {
    path: '/item/:id/edit',
    name: 'editItem',
    component: Editor,
  }, {
    path: '/item/create',
    name: 'createItem',
    component: Editor,
  }
];
复制代码

当从/item/22/edit切换到/item/11/edit时，会触发beforeRouteUpdate。 但如果从/item/22/edit切换到/item/create时，并不会触发beforeRouteUpdate。

解决方法

如果上面两个状况都要监听到，可以选择监听$route参数，当url发生变化时，都会引起$route的改变，在监听函数里执行需要的操作。

watch: {
  '$route': function() {
    if (this.$route.name === 'createItem') {
      ...
    } else if (this.$route.name === 'editItem') {
      ...
    }
  }
}
复制代码