Vue中刷新当前页面

刷新页面

方法一

window.reload()；


  

 

  
1
  
2
 

方法二

this.$router.go(0);

  

 

  
1
 

以上两种方式会出现白屏

方法三

不会有闪烁的空白出现
App.vue

<template>
  <div id="app"> <!-- 增加判断，让其隐藏 --> <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
export default {
  name: 'App', // 暴露reload，方便后面组件调用
  provide(){ return { reload: this.reload }
  }, data(){ return { isRouterAlive: true }
  }, methods:{ // 重新加载方法 reload(){ this.isRouterAlive = false; this.$nextTick(()=>{ this.isRouterAlive = true; }) }
  }
}
</script>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
 

子组件调用刷新方法

<script>
export default { // 获取APP.vue里的reload方法
  inject: ["reload"], methods: { reloadPage() { // 刷新页面 this.reload(); }
  }
}
</script>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

参考
vue项目如何刷新当前页面

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/100032830