共计 1135 个字符，预计需要花费 3 分钟才能阅读完成。
当页面切换到同一个路由但不同参数的地址时，组件的生命周期钩子不会从新触发。
这是因为 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》