vue项目实现页面刷新方式

使用vue做管理后台时，经常遇到新增，删除，修改需要返回主页面。这时页面需要重新刷新才能看到最新的数据。

（1）window.location.reload();

export default { 
  methods: {
     /* 刷新页面 */
    refreshView () {
      window.location.reload();
    },
  }
}

页面采用原生的js刷新方式，刷新等待的效果有点慢，但也可以满足要求。

（2）this.$router.go(0);

export default { 
  methods: {
     /* 刷新页面 */
    refreshView () {
     this.$router.go(0);
    },
  }
}

页面采用vue路由回退功能，页面虽然也能刷新，但等待的效果也有点久。

（3）this.$router.go(window.location.href);

export default { 
  methods: {
     /* 刷新页面 */
    refreshView () {
     this.$router.go(window.location.href); 
    },
  }
}

页面采用vue路由回退当前页面，页面不会空白一瞬间。

（4）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>

index.vue页面

<script>
  export default {
    name: 'index',
    // 注入reload, AppVue中注册
    inject: ['reload'],
    methods: {
      // 退出登陆
      logout: function () { 
        // 刷新当前页面
        this.reload();
      }
    }
  }
</script>

总结：第四种方式最快速达到刷新页面效果，等待时间最短，用户体验较好。