2020-06-15 vue刷新页面方法

实现页面刷新有三种方法：

1.this.$router.go(0)

类似 window.history.go(0)

2.location.reload()

3.provide/inject

可以简单理解为高级版的props，具体代码请往下翻阅

优缺点：

三种方法都可以实现页面刷新，1,2的优点是代码简单，也只有代码简单这个优点了，缺点是一来页面会空白一下，体验很差，二来这样刷新页面会清空vuex存储的数据；

所以推荐使用第三种方法。

具体代码实现：

首先是在App.vue中添加代码：

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

export default {
  name: "app",
  data() {
    return {
      isRouterAlive: true
    };
  },
  provide() {
    return {
      reload: this.reload
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    }
  }
};

在需要刷新的页面中调用reload方法即可：

  methods: {
    reload() {
      this.reload();
    }
  },
  inject: ["reload"],

法三的原理就是通过一个标志位isRouterAlive控制<router-view>（v-if="true/false"会将元素从DOM树挂载/移除）实现页面刷新，然后通过provide将 reload 提供给所有子组件，需要用到 reload 的子组件用inject接受一下即可使用。

参考：AaronYuan vue项目刷新当前页面