最近在项目中遇到点问题，在Vue中跳转相同路由的页面时，出现页面多个生命钩子没执行？了解文档后，才发现 ...

<div id="app">
  <router-view></router-view>  <!--Vue 嵌套路由-->
</div>

毫不陌生，上面的写法是我们最常见的使用方式。<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。

当我们在跳转时，匹配到的$route.path或$route.name是当前页面时,页面可能不会发生变化，只是URL变动而已。例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象或使用 2.2 中引入的 beforeRouteUpdate 导航守卫

场景：当前页面是一个商品详情页，其中包含一个推荐列表，列表项点击跳转的是同类型的商品详情页。

参考文档：

下面介绍router-view 属性：key 的使用方法

1. 
   

   不设置 router-view 的 key 属性
   
   由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子, 这时候你需要在路由组件中, 添加beforeRouteUpdate钩子来执行相关方法拉去数据
   
   相关钩子加载顺序为: beforeRouteUpdate

   
   
2. 
   

   设置 router-view 的 key 属性值为 $route.path
   
   从/page/1 => /page/2, 由于这两个路由的$route.path并不一样, 所以组件被强制不复用, 相关钩子加载顺序为:
   
   beforeRouteUpdate => created => mounted
   
   从/page?id=1 => /page?id=2, 由于这两个路由的$route.path一样, 所以和没设置 key 属性一样, 会复用组件, 相关钩子加载顺序为:
   
   beforeRouteUpdate

   
   
3. 
   

   设置 router-view 的 key 属性值为$route.fulpath
   
   从/page/1 => /page/2, 由于这两个路由的$route.fullPath并不一样, 所以组件被强制不复用, 相关钩子加载顺序为:
   
   beforeRouteUpdate => created => mounted
   
   从/page?id=1 => /page?id=2, 由于这两个路由的$route.fullPath并不一样, 所以组件被强制不复用, 相关钩子加载顺序为:
   
   beforeRouteUpdate => created => mounted

   
   

<div id="app">
  <router-view></router-view>  <!--不设置Key-->
  <router-view :key="$route.path"></router-view> <!--路径Key-->
  <router-view :key="$route.fullpath"></router-view> <!--全路径Key-->
  <router-view :key="randomKey"></router-view> <!--唯一Key-->
</div>
computed:{
    randomKey(){
        let uuid = (format = "xxxx-yyyy-xx-yy")=>{
            let d = new Date().getTime();
            return (format || "xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx").replace(
              /[xy]/g,
              function(c) {
                let r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
              }
            );
        }
        let num = this.$route.name !== undefined
          ? this.$route.name + getUuid()
          : this.$route + getUuid();          
        return num;
    }
}