最近遇到一個需求，需要刷新當前頁面來更新數據，網上找了很多方法，在這里做個總結。

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

強制刷新

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：

當前組件：

當點擊按鈕時所有頁面重新渲染，體驗最好

以上就是vue無痕刷新的實現方法介紹的詳細內容，更多請關注php中文網其它相關文章！