vue刷新页面的三种方式，并处理死循环

vue页面刷新的办法和处理页面重复循环。先写一下刷新页面的方法，解决循环放在下边。

1.直接使用刷新当前页面，会有短暂白屏，体验效果不好

location.reload();

2.通过路由传入0，刷新当前页面。忽悠短暂白屏，体验效果不好

this.$router.go(0);

3.通过provide / inject组合，这个体验感是最好的！

第一步：先在App.vue里 给 <router-view> 加一个 if 判断，通过 $nextTick()实现先移除再添加达到刷新的功能。

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

<