Vue静态刷新路由页面

使用场景：保存或者编辑后你原来的页面不会相应改变

this.$router.go(0)和 location. reload()太粗暴了，页面会留白，不太推荐

推荐方法provide / inject 组合

1.通过控制router-view 的显示与隐藏，来重渲染路由区域，重而达到页面刷新的效果

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

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

2.在需要调用的子组件中引用，需要先用inject先注入reload方法,然后在需要的地方调用this.reload()

使用示例：

<template>
  <div id="app">
    <button @click="button"></button>
  </div>
</template>

<script>
export default {
    //把这个东西引进去，直接写就好了，不需要import
    inject: ["reload"],
  data() {
    return {};
  },
  methods: {
    button () {
      //触发事件调用这个方法就可以了
      this.reload()
    },
  },
};
</script>

就可以实现了,有更好的方法请评论留言，谢谢