关于vue.js:vue-项目中不同路由且同一组件识别

当页面切换到同一个路由但不同参数的地址时，组件的生命周期钩子不会从新触发。

这是因为vue-router会辨认出两个路由应用的是同一个组件从而进行复用，并不会从新创立组件，因而组件的申明周期钩子天然也不会触发。

组件实质是一个映射关系，所以先销毁再重建一个雷同的组件会存在很大水平的性能节约，复用组件才是正确的抉择。然而这也意味着组件的生命周期钩子不会再被调用。

有三个办法来解决这个问题：

• 路由导航守卫beforeRouteUpdate

vue-router提供了导航守卫beforeRouteUpdate，该守卫在以后路由扭转且组件被复用时调用，所以能够在组件内定义组件导航守卫来解决这个问题。在vue-router2.2之后的版本能够应用。

export default{
   data(){
       return {}
  },
   beforeRouteUpdate(to,from,next){
        console.log(to,from,next)
        if(to.fullPath != from.fullPath){
            next()
            // 对路由变动作出响应
            // this.changeUser()
        }
    },
    methods:{}  
}

• 察看$route对象的变量

通过watch能够监听到路由对象产生的变动，从而对路由 变动作出响应。例如：

watch: {
    '$route' (to, from) {
        // 对路由变动作出响应
        
    }
}

这种形式也能够解决上述问题，但代价是组件内多了一个watch，这会带来依赖追踪的内存开销。
如果最终抉择应用watch解决这个问题，那么在某些场景下举荐在组件里只察看本人须要的query，这样有利于缩小不必要的申请。

watch: {
    '$route.query.id' () {},
    '$route.query.page' () {}
}

• 为router-view组件增加属性key

  这种做法十分取巧，十分“暴力”，但十分无效。它实质上是利用虚构DOM在渲染时通过key来比照两个节点是否雷同的原理。通过给router-view组件设置key，能够使每次切换路由时的key都不一样，让虚构DOM认为router-view组件是一个新节点，从而销毁组件，而后再从新创立新组件。即便是雷同的组件，然而如果url变了，key就变了，Vue.js就会从新创立这个组件。

  因为组件是新创建的，所以组件内的申明周期会反复触发。实例如下：

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

这种形式的害处很显著，每次切换路由时组件都会被销毁并且从新创立，十分节约性能。其长处更显著，简略粗犷，改变小。为router-view组件设置了key之后，立刻就能够看到问题被解决了。

文章内容摘抄自《深入浅出Vue.js》