一、什么是無痕刷新
在不刷新瀏覽器的情況下,實現頁面的刷新。
傳統的刷新頁面方式
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