vue项目刷新当前页

当在 vue 项目中需要刷新当前页时，第一个是不是想到 this.$router.push(当前页面的路径)？
但是你会发现，这样并没有什么用。因为基于 vue 这个框架，它发现当前路由没有改变，它并不会刷新。

解决方法 1

this.$router.go(0)

或者

window.location.href()

这两种方式本质上就是重新刷新了整个页面而且随着项目业务的复杂程度，很可能会增加一些别的初始化请求，所以这并不是最优解。

解决方法 2
思路是新增一个空白页，当需要执行刷新先跳转到空白页，再快速跳转回来。
实现起来很简单，我就不贴上代码了。

解决方法 3
这个方法最方便快捷，连空白页的组件也不需要写。
这里用到了 vue 框架的 provide 和 inject
在父组件中注入以来 provide 一个对象，在子组件中 inject。
1、在 APP.vue 页面加一个条件渲染，默认为 true

<template>
  <div id="app">
    <router-view v-if="noRefresh" />
  </div>
</template>
<script>
export default {
  name: 'App',
  provide() {
    return {reload: this.reload}
  },
  data() {
    return {noRefresh: true}
  },
  methods:{
    // 需要 reload 时先将页面隐藏，在 dom 更新后的回调再将页面显示
    reload() {
      this.noRefresh = false
      this.$nextTick(function(){this.noRefresh = true})
    }
  }
}
</script>

子组件

<script>
export default {inject:['reload'],
    methods:{func(){
            // 刷新时执行的函数
            this.reload()}
    }
}
</script>