VUE相同路由参数不同不会刷新的问题

VUE相同路由参数不同不会刷新的问题

• 通常情况下，我们喜欢用keepAlive包裹router-view

  <div id="app">
      <keep-alive >
        <router-view/>
      </keep-alive>
  </div>

  同时在created中触发请求，在路由参数不同的情况下并不会执行对应的操作。

• 解决方法：

1.将需要重新加载的组件加在keep-alive的属性exclude中

 <keep-alive exclude="Detail">
      <router-view/>
 </keep-alive>

2.通过 watch 监听路由变化，做判断路由路径然后调用响应的方法

 watch:{
        // 监听路由变化，重获取数据
        '$route'(to, from){
          if(to.fullPath.indexOf('detail')!==-1){
              this.iid = to.params.iid;
           this.getGoodsDetail();
          }
        }
    }

3.通过组件导航守卫来设置对应的meta属性

beforeRouteEnter: (to, from, next) = > { // 写在当前组件
 to.meta.keepAlive = false;
 next();
},
 beforeRouteLeave: (to, from, next) = > { //写在前一个组件
 to.meta.keepAlive = false;
 next();
},

参考地址（https://www.zhangshengrong.com/p/Ap1ZpBqoN0/）