總結VUE幾種頁面刷新方法

有時候在頁面裏作了某些操做之後，須要頁面刷新一下來從新獲取數據。試了幾種方法，如下總結：

一、this.$router.go(0)

這種方法頁面會一瞬間的白屏，體驗不是很好，雖然只是一行代碼的事

二、location.reload()

這種也是同樣，畫面一閃，效果總不是很好

三、跳轉空白頁再跳回原頁面

在須要頁面刷新的地方寫上：this.$router.push('/emptyPage')，跳轉到一個空白頁。在emptyPage.vue裏beforeRouteEnter 鉤子裏控制頁面跳轉，從而達到刷新的效果

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

這種畫面雖不會一閃，可是能看見路由快速變化。

四、控制<router-view>的顯示隱藏

默認<router-view v-if="isRouterAlive" />isRouterAlive確定是true，在須要刷新的時候把這個值設爲false，接着再從新設爲true：

this.isRouterAlive = false
this.$nextTick(function () {
  this.isRouterAlive = true
})
這種方法從畫面上是看不出破綻的。也能夠搭配provide、inject使用。例如：
<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: ['reload'],

在須要執行的地方直接調用方法便可：this.reload()。

個人業務需求是在home裏，頁面右上角，在個人裏面點擊修改我的資料成功後，頁面1就要刷新一下，若是是在app裏面搭配provide、inject這樣用的話，會出現一個問題，就是全部的彈窗以及menu部分就都不見了。尚未找到爲何，，

後來發現，個人需求不經過刷新頁面也能夠解決，就是利用VUE組件通訊，監聽事件發生，而後從新調一下獲取數據的接口就行。

也就是說：

一、給Vue的原型上添加一個bus屬性

main.js：Vue.prototype.$bus = new Vue()

二、home頁面進行修改我的資料操做時觸發事件，

home.vue： changeProfile （） {this.$bus.$emit('change')}

三、頁面1裏監聽若是執行了操做，就調取頁面1須要從新加載的數據接口。

mounted () {
  this.$bus.$on('change', ()=> {
    this.doSomething()
  })
},
對於個人需求來講，頁面刷新的第四種方法和利用組件通訊都能解決個人問題，前者更簡單後者更專業，也更強大。