Vue 刷新当前页面

实现原理

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

APP.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>
export default {
  // 增加
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}

使用页面

export default {
  inject: ['reload']
}
// 在需要执行刷新的逻辑处 this.reload() 刷新当前页面并重载数据