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

這裡主要記錄三種方法,分別是:強制刷新、偽造刷新、無痕刷新。

強制刷新

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:

當前組件:

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

推薦閱讀:

查看原文 >>
相关文章