Vue實現無痕刷新


一、什么是無痕刷新

在不刷新瀏覽器的情況下,實現頁面的刷新。

傳統的刷新頁面方式

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

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

這兩種方法都可以達到頁面刷新的目的,簡單粗暴,但是用戶體驗不好,相當於按 F5 刷新頁面,頁面的重新載入,會有短暫的白屏

 

二、實現無痕刷新

先在全局組件注冊一個方法,用該方法控制 router-view 的顯示與否,然后在子組件調用;

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

provide:全局注冊方法;

inject:子組件引用 provide 注冊的方法

APP.vue

 

需要進行無痕刷新的頁面

 

三、provide/inject的使用

簡單的來說就是在父組件中通過provider來提供變量,然后在子組件中通過inject來注入變量(這種方式也可以實現組件傳值,父傳子),provide / inject這對選項需要一起使用,以允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,並在起上下游關系成立的時間里始終生效。這個東西很類似於React中的context,實現跨組件傳值

  • provide 選項應該是:一個對象或返回一個對象的函數

  • inject 選項應該是:一個字符串數組,或 一個對象,對象的 key 是本地的綁定名

provide

 

inject

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM