关于vue项目刷新当前页面的几种方式

目前在做一个后台管理系统，项目要求在页面右上角加上一个刷新图标按钮，点击按钮时刷新页面。
对于页面刷新个人知道这几种方式
1.利用vue的路由跳转：
this.$router.go(0)
这种方式的刷新方式利用了路由特性，优点很明显，方便。一行代码即可搞定，但是呢，缺点也很致命：页面会一瞬间的白屏，体验不是很好。在当前的项目需求中不适合
2.location对象的reload方法：
location.reload().
此方法作用类浏览器的刷新按钮，刷新时页面会瞬间白屏闪烁，体验不好。
具体关于loction.reload（）方法可以看：菜鸟教程
3.同样利用路由跳转实现：
方法如下：
首先新建空白页面：excessive.vue ,在路由中注册path："/excessive",
在该页面的beforeRouteEnter 路由钩子中定义跳转信息

beforeRouteEnter (to, from, next) {
      next(（）=> {
        this.$router.replace(from.path)
      })
}。

之后再需要刷新的方法里：this.$router.push(’/excessive’)

他的原理是当需要刷新页面时先跳转到其它（空）页面，之后再跳转回来。此时页面不会闪烁，但是可以实现刷新，看起来很完美，但是在页面来回跳转的时候虽然页面没有闪烁，但是路由地址却在急速变化。这种方式可以酌情使用，看需求吧

4.通过控制入口文件的router-view进行刷新

<router-view v-if="isShow" />

在data中设置isShow

isShow: true

在methods中定义reload方法：

  reload() {
      this.isShow= false;
      this.$nextTick(() => {
        this.isShow= true;
      });
    }

通过provide导出

provide() {
    return {
      reload: this.reload,
    };
  }

之后在你需要刷新的页面引入：

inject: ['reload']

在你需要刷新的地方调用reload方法：

this.reload()

这种方式实现刷新页面时不会造成页面闪烁也不会有路由变化，我在项目中用的就是这种方式。

ps：在开发中可能会有类似的需求，但是不是像我这样的点击刷新，而是数据变化刷新页面。此时可以通过数据监听实现；跨页面数据变化可以通过eventBus实现，具体可以查看相关文档。

以上结论如有错误欢迎指正，谢谢