vue刷新子页面

背景

某一天产品跟我说需要在这个页面做一个刷新按钮,只刷新子页面父页面的不动，那就加呗，谁叫他是产品啊。

1，reload

1
location.reload();

2,go(0)

1
this.$router.go(0);

上面的两种方法都是强制刷新整个页面。当然不符合我们的需求

3，provide, inject

至于这两个是什么东西，请自行参考provide, inject

1,首先在需要刷新的route-view的地方添加判断

1
<router-view v-if="isRouterAlive"></router-view>

2,定义provide数据

1
2
3
4
5
provide(){
   return {
     reload: this.reload
   }
 },

3,声明刷新方法

1
2
3
4
5
6
reload(){
   this.isRouterAlive =false;
   this.$nextTick(()=>{
      this.isRouterAlive =true;
   });
}

上面三步都是在父组件里完成，剩下的就是在子组件里完成了

4，刷新引用inject

1
 inject:["reload"],

5,在需要的地方调用

1
this.reload();

以上代码测试有效，但是会有一个问题，多页签项目的时候，解决办法是在你的页签和子组件的外层再包裹一层
“<router-view></router-view>“,通过这个router-view来刷新下面的子组件。
以上就是我用过的方法，如有更好的方法，我将虚心学习。谢谢