vue刷新当前页面的三种方法

1.第一种:推荐
这种方法会在浏览器地址栏中多添加#reloaded

  mounted() {
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded";
      location.reload();
    }
  },

2.下面两种方法都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好

this.$router.go(0)
location.reload()

3.新建一个空白页面，点击确定的时候先跳转到这个空白页，然后再立马跳转回来,这个方法适用于dialog关闭时刷新页面数据

//监听dialog的关闭事件或者确定按钮的点击事件，当事件触发时执行下面代码

this.$router.replace({
  path: '/path1', //空白页的路由地址
  name: 'name1'
})

在空白页面执行下面的代码:

data(){
this.$router.replace({
  path: '/path2', //让路由跳转回当前页面
  name: 'name2'
})
return {}
}

这个方式，相比第二种和第三种种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，可采用
4.第五种方法:provide / inject 组合
这个方法需要修改App.vue组件，修改后的代码如下所示:

<template>
  <div id="app">
    <transition>
      <router-view v-if="isRouterAlive" />
    </transition>
  </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>

通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载，这里定义了isRouterAlive //true or false 来控制
然后在需要刷新的页面中注入App.vue组件提供 reload 依赖，然后直接用this.reload来调用就行,如下所示:

<script>
export default {
  inject: ["reload"],
  name: "reload",

  data() {
    return {};
  },

  methods: {
    close() {
      this.reload();
    }
  }
};
</script>

4.第六种方法:利用vue的内置组件keep-alive巧妙实现进入页面的时候重新获取想要的数据
代码:

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>

//使用Vue组件切换过程钩子activated(keep-alive组件激活时调用)，而不是挂载钩子mounted
export default {
　　// ...
　　activated: function() {//当页面被激活时触发
　　　　this.getCaseDetail()
　　}
　}
</script>