vue 重置刷新页面数据（最快捷 简单的方式，全局定义）

Posted 2022-02-23 水香木鱼

第一种方式 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)