Vue刷新页面

有时候因为功能需要，需要项目刷新页面，使页面回到初始状态，在Vue中有四种思路来实现：

1.重新路由到当前页面（不可行）

2.使用强制刷新（可行）

3.跳转其他页面再跳回（可行）

4.provide/inject模式（可行，推荐）

第一种测试失败，没有任何作用，读者可以自行实验

第二种方式主要有两种方式来实现

reloadPage () {
    location. reload()
}
或
reloadPage () {
    this.$router.go(0)
}

上面两种方式都可行，但是效果是相当于F5刷新页面一样，整个页面重新加载和渲染，会留下短暂的白屏时间，影响体验。

第三种方式不会引起页面的瞬间白屏，只会在地址栏部分瞬间变化一下，如果对此没什么要求可以采用这种方案。

第四种（推荐），通过provide/inject组合来刷新页面

首先要对App.vue进行部分调整

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

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

<style>
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 0px;
}
</style>

不要忘记给template中的 route-view 加上 v-if="isRouterAlive"

然后在需要刷新页面的页面中通过inject注入并在方法中调用即可

export default {
  inject: ['reload'],
  name: 'test',
  ...
  methods: {
    reloadPage () {
      this.reload()
    }
  }
}