Vue刷新当前页面的方法

在做项目的过程中会遇到很多需要重新刷新页面的地方，比如说弹出的登陆框，在登陆成功后要关闭弹窗，并且刷新页面，那么，有哪几种好用的方式来进行页面的刷新呢。

第一种，就是是新建一个空白的页面，跳转到改页面，然后再立马跳转回原页面，但是这个方式很显然不能达到很好的用户体验。

第二种，可以使用跳转路由的方式，给go的参数传0可以实现在本页面跳转本页面，实现刷新。

this.$router.go(0)

第三种，这种是比较方便的一种方法，直接上代码：

在App.vue文件:

这种方法是通过控制router-view的显示与隐藏重新加载实现刷新

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

export default {
  name: "App",
  provide () {
    // 父组件中通过provide来提供变量，在子组件中通过inject来注入。
    return {
      reload: this.reload
    };
  },
  methods: {
    reload () {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    }
  }
};

在需要用到的组件中注入

export default {
  inject: ["reload"],
   methods:{
    getList(){
    //直接使用
        this.reload()
    }
}
}

这样直接调用就可以实现刷新页面