一、什么是無痕刷新

在不刷新瀏覽器的情況下，實現(xiàn)頁面的刷新。

傳統(tǒng)的刷新頁面方式

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

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

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

二、實現(xiàn)無痕刷新

先在全局組件注冊一個方法，用該方法控制 router-view 的顯示與否，然后在子組件調(diào)用；

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

provide：全局注冊方法；

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

APP.vue

<template>
?<div>
? ?<router-viewv-if="isShow"></router-view>
?</div>
</template>
<script>
exportdefault{
?name:"App",
?provide(){
? ?return{
? ? ?reload:this.pageReload
? }
},
?data(){
? ?return{
? ? ?isShow:true
? }
},
?methods:{
? ?//刷新
? ?pageReload(){
? ? ?this.isShow=false;
? ? ?this.$nextTick(()=>{
? ? ? ?this.isShow=true;
? ? })
? }
}
};
</script>

需要進行無痕刷新的頁面

<template>
? ?<div>
? ? ? ?<button@click="handleReload()">點擊刷新</button>
? ?</div>
</template>

<script>
exportdefault{
? ?name:"Home",
? ?inject:["reload"],
? ?methods:{
? ? ? ?handleReload(){
? ? ? ? ? ?this.reload()
? ? ? }
? },
? ?created(){
? ? ? ?console.log(111)
? }
}
</script>

三、provide/inject的使用

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

• provide 選項應(yīng)該是：一個對象或返回一個對象的函數(shù)

• inject 選項應(yīng)該是：一個字符串數(shù)組，或 一個對象，對象的 key 是本地的綁定名

provide

//返回一個對象的函數(shù)
<template>
?<div></div>
</template>
<script>
exportdefault{
?name:?"App",
?provide() {
? ?return{
? ? ?title:?"alley"
? };
}
};
</script>

//一個對象
<template>
?<div></div>
</template>
<script>
exportdefault{
?name:?"App",
?provide:{
? ?title:"Alley"
}
?
};
</script>

inject

//一個字符串數(shù)組
<template>
? ?<div>
? ? ? ?<h2>{{title}}</h2>
? ?</div>
</template>

<script>
exportdefault{
? ?name:"Home",
? ?inject:["title"],
}
</script>


//一個對象
<template>
? ?<div>
? ? ? ?<h2>{{title}}</h2>
? ?</div>
</template>

<script>
exportdefault{
? ?name:"Home",
? ?inject:{
? ? ? ?title:{
? ? ? ? ? ?type:String,
? ? ? ? ? ?default:"巷子"
? ? ? }
? },
}
</script>

·END·
?

溫馨提示

如果你喜歡本文，請分享到朋友圈，想要獲得更多信息，請關(guān)注我。