vue实现刷新整个页面无空白

我们需要刷新整个页面，可以使用this.$router.go(0) 和 location.reload()，这两种方法都可以实现整个页面的刷新，但是他有一个弊端，就是会造成页面有短暂的空白的现象，所以基于需求可以通过vue中的方法实现无空白的刷新。
首先在App.vue里面去配置router-view的相关操作，如下：

利用provide inject的属性，在需要的地方调用这个方法即可。

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
     
  name: "App",
  data() {
     
    return {
     
      isRouterAlive: true
    };
  },
  provide() {
     
    return {
     
      reload: this.reload
    };
  },
  methods: {
     
    reload() {
     
      this.isRouterAlive = false;
      this.$nextTick(() => {
     
        this.isRouterAlive = true;
      });
    }
  }
};
</script>

<style></style>

2. 然后在具体页面中加上inject配置，具体如下：

export default {
     
  inject: ['reload'],
  methods: {
     
    reloadPage() {
     
      if (this.request === 2) {
     
        this.reload();
      }
    },
   },
  }