vue项目 使用provide、inject无闪烁刷新当前页面

解决的办法及遇到的问题：

 

• this.$router.go(0) 这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好
• 用 vue-router 重新路由到当前页面，页面是不进行刷新的。
• location.reload() 这种也是一样，画面一闪，体验不是很好

推荐解决方法：

用 provide / inject 组合

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

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

App.vue

export default {
  name: 'app',
  // 提供reload方法
  provide: function () {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true,
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true;
      })
    }
  }
}

在需要用到刷新的页面。在页面注入 App.vue 组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加...）,直接

this.reload() 调用，即可刷新当前页面。

注入 reload 方法

export default {
        name: "registrationDetails",
        components: {spikeListView, successSpikeListView},
        inject: ['reload'],//注入reload
        data() {
            return {}
        }
}

直接调用 this.reload()

methods:{
    onSubmit(){
        this.reload();
    }
}

这样就完成了。如果能帮到你，可以关注一下~

---

喜欢博主的可以点赞关注一下

长得美的，长得帅的都关注了

现在就差你了

还不长按关注一下

---