vue刷新当前页不闪屏不重新加载的实现方法, this.reload体验较好

vue常规刷新当前页面方法及问题

vue常用刷新当前页面的几种方法如下
1、this.$router.go(0)。这种方法虽然代码很少，体验很差。整个页面会短暂的闪烁一下，重新加载体验不是很好
2、location.reload() / window.reload() 也是一样，画面一闪，体验不是很好
3、用vue-router路由到跳转到当前页面，页面是不进行刷新的。

不重新加载当前页刷新应用的场景

1、工作真实遇到-> 点击取消按钮，清空多个自动评估下拉框绑定已存在的数据。不清空在修改时页面数据还存在，会产生一个bug
2、如在表单删除或者增加一条记录的时候希望当前页面可以重新刷新
3、提交完一个认证表单，需要改变一下认证状态。页面上的其他操作要在这个认证表单填完之后 才能进行其他操作。这个时候就需要进行刷新页面。
… 很多应用实例、可以应用到许多不重新加载当前页且不白屏的实例中

废话不多说，开始上具体的实现代码

解决vue刷新当前整页重新加载方法

实现原理

用provide / inject 组合
原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

在 App.vue声明reload方法，控制 router-view 的显示或隐藏，从而控制页面的再次加载。

具体代码

在 App.vue中加入以下代码，代码如下

<template>
  <div id="app">
    <!--不白屏刷新当前页面。vue页面声明inject:['reload']注入reload  this.reload调用-->
    <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>

vue页面调取App.vue reload刷新的实现

首先页面注入 inject:[‘reload’],

通过 this.reload 来调用app中定义的reload，这样在某个事件操作完成后不会重新加载整个页面闪屏一下，直接提升了页面刷新的体验。可应用于多种场景。

一次配置，多个vue文件都可适用，很实用方便。
完美解决掉开发过程中遇到的问题(点击取消按钮不重新加载整个页面，只实现局部的刷新)

如对你有帮助还请点个赞支持~