vue刷新当前页面

一.this.$router.go(0)

利用了 history 中前进和后退的功能，传入 0 刷新当前页面。但是有一个问题就是页面整个刷新过程中会白屏，严重影响用户的体验。

二.location.reload()

直接使用刷新当前页面的方法。但是同样存在有一个问题就是页面整个刷新过程中会白屏，严重影响用户的体验 。

三.provide / inject组合

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

provide : 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject: 一个字符串数组，或一个对象，对象的 key 是本地的绑定名。

步骤一：（App.vue） 通过 $nextTick()，协助实现。先把 <router-view /> 移除，移除后再重新添加，达到刷新当前页面的功能。是目前最合适的实现方式

<template>
<div id="app">
   <router-view v-if="isRouterAlive"/>
</div>
</template>
 
<script>
export default {
name: 'App',
provide () {
   return{
     reload: this.reload
   }
 },
data() {
   return {
       isRouterAlive: true
   }
 },
methods:{
   reload(){
     this.isRouterAlive=false
     this.$nextTick(function(){
       this.isRouterAlive=true
     })
   }
 }
}
</script>

步骤二：需要更新的页面 inject: ['reload'],

<script>
export default {
  name: "detail",
  //  app.vue页面定义
  inject: ["reload"],
  data(){}
}
</script>

步骤三：直接this.reload()调用，即可刷新当前页面。