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:
當前組件:
當點擊按鈕時所有頁面重新渲染,體驗最好
推薦閱讀: