关于beforeRouteUpdate

下面的路由指向的其实是同一个传递不同参数的路径,只不过是传递的参数不同,拦截路由的路由文件里面是同一个配置

//路由标签
 <router-link  to="/detail/detail-item/1" tag="span">商品1</router-link>|
 <router-link  to="/detail/detail-item/2" tag="span">商品2</router-link>|
//路由文件
      {
        name: 'detail-item',
        path: 'detail-item/:id',
        component: detail_item
      },
     
//组件路由卫士
 beforeRouteUpdate(to, from, next) {
    console.log("被复用");
    next();
  },

• 官方文档解释

// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 this

• 为什么不会被触发呢,文档解释中的(举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，)是重点,这里只是传递的参数改变
• 比如:

//1.query传参
<router-link :to="{path:'/detail/detail-item',query:{id:6}}" tag="span">

//2.动态路由传参
<router-link :to="{name:'detail-item',params:{id:6}}" tag="span">

这些方式都是可以触发beforeRouteUpdate函数的