Vue页面重新加载刷新数据配置

第一种方式 reload
一、在根文件 app.vue文件中配置

//app.vue
 
<template>
  <!-- 给全局挂载 适配元素 app -->
  <div id="app">
      <keep-alive include="DataSet">
        <!-- 配置重置刷新  v-if="isRouterAlive" -->
        <router-view v-if="isRouterAlive" />
      </keep-alive>
  </div>
</template>
 
<script>
import _ from 'lodash'
export default {
  name: 'App',
  //自定义
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
     //定义状态
      isRouterAlive: true
    }
  },
  methods: {
    //重置
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

二、在需要引用重置的页面中添加

//dataSet.vue <<<=（需要引入的页面）
 
export default {
//使用options.d.ts 当中的inject变量 获取APP 里的配置状态(然后在需要调用的接口当中 加入this.reload)
inject: ['reload'], 
   data() {
    return {
    ...
  },
  methods: {
    //重置
    getReload() {
      this.reload() //调用刷新
    },
  }
}

大功高成！！！

补充：（推荐使用第一种 方式 reload，体验度好，无空白页面）
以下两种方式也是实现重置刷新的功能
缺点：相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验度不好

（2）window.location.reload()

（3）this.$router.go(0)