vue 刷新不出现白屏的解决办法

vue 刷新不出现白屏的解决办法

因为在写一个项目，需要切换工作空间，每切换一个工作空间就要重新获取一下权限，为了在切换工作空间的时候，可以重新获取当前页数据，第一个想到的解决办法是强制刷新 this.$router.go()。但是这个方法会使页面出现一段时间的空白，影响使用体验，所以就在网上找到一个可以同时满足数据刷新但页面不白屏的方法

1、路由切换操作

// 如果在这个空间有权限，刷新当前页面
this.$router.push(path).catch(err => err);

2、在使用router-view 的地方

<template>
  <div class="home">
    <router-view class="right"  v-if="isRouterAlive" />
  </div>
</template>

<script>

export default {
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    };
  },
  mounted() {

  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
};
</script>

3、在被刷新的地方

  inject: ['reload'],
  watch: {
  // 监听到路由跳转时，强制刷新
  '$route': {
    handler() {
      this.reload()
    }
  }
},

亲测可用