vue 無痕刷新

最近遇到一個需求，須要刷新當前頁面來更新數據，網上找了不少方法，在這裏作個總結。

這裏主要記錄三種方法，分別是：強制刷新、僞造刷新、無痕刷新。

強制刷新

window.location.reload()，原生 js 提供的方法；

this.$router.go(0)，vue 路由裏面的一種方法；

這兩種方法均可以達到頁面刷新的目的，簡單粗暴，可是用戶體驗很差，至關於按 F5 刷新頁面，頁面的從新載入，會有短暫的白屏。

僞造刷新

經過路由跳轉的方法刷新，具體思路是點擊按鈕跳轉一個空白頁，而後再立刻跳回來

// index.vue 首頁
this.$router.replace('/empty')

// empty.vue 空白頁
created() {
    this.$router.replace('/')
}

當點擊刷新按鈕時地址欄會有快速的地址切換過程

無痕刷新

先在全局組件註冊一個方法，用該方法控制 router-view 的顯示與否，而後在子組件調用；

用 v-if 控制 <router-view></router-view> 的顯示；

provide：全局註冊方法；

inject：子組件引用 provide 註冊的方法；

App.vue：

當前組件：

當點擊按鈕時全部頁面從新渲染，體驗最好