vue 刷新当前页面的方式

1.使用window.location.href window.location.replace() window.location.reload()

会出现空白，体验不是很好

2.先进入一个空路由，然后返回

reflashPage(){
    let NewPage = '_empty' + '?time=' + new Date().getTime()/500;
    this.$router.push(NewPage);
    this.$router.go(-1);
}

刷新后点浏览器的前进按钮会出现空白页

3.使用 provide / inject

简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。

app.vue

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

需要跳转的页面： 前面会有这个 inject

export default {
    inject:['reload'],
    data () {
        return {
        ...
        }
    },

后面想刷新当前页面的地方这样写：

this.reload();

---

Vue是双向数据绑定的，操作数据实时变化，大多情况不需要刷新页面。

之前在做表单清空时用到了页面刷新，表单的数据比较多逐个清空比较麻烦。

最近做页面拖拽排版效果，使用了jq的插件操作dom没有同时操作数据，导致数据和dom不一致，后来选择用刷新页面来做到统一。