有時(shí)候在項(xiàng)目中我們需要在頁(yè)面完成一些操作后,進(jìn)行頁(yè)面刷新.文中重點(diǎn)介紹provide / inject組合是vue2.2.0新增的api
解決方案以及出現(xiàn)的問(wèn)題
1.this.$router.go(0). 通過(guò)路由跳轉(zhuǎn)的方式重新渲染頁(yè)面, 雖然代碼量很少,便于書(shū)寫(xiě)和理解,但是體驗(yàn)很差,在刷新的一瞬間會(huì)出現(xiàn)白屏的現(xiàn)象.
2.location.reload(). 該方法只有一個(gè)參數(shù)兼贸，當(dāng)值為 true 時(shí)，將強(qiáng)制瀏覽器從服務(wù)器加載頁(yè)面資源养涮，當(dāng)值為 false 或者未傳參時(shí)，瀏覽器則可能從緩存中讀取頁(yè)面。 缺點(diǎn):該方法在跨域調(diào)用（執(zhí)行該方法的腳本文件的域和 Location 對(duì)象所在頁(yè)面的跨不同）時(shí)鸡典，將會(huì)拋出 DOMException 異常挣菲。并且也同樣會(huì)出現(xiàn)頁(yè)面在刷新的時(shí)候會(huì)出現(xiàn)白屏的現(xiàn)象
3.provide / inject組合
原理: 以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴慧妄，不論組件層次有多深坎穿，并在起上下游關(guān)系成立的時(shí)間里始終生效展父。
提示: provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的玲昧。然而，如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象篮绿，那么其對(duì)象的屬性還是可響應(yīng)的孵延。
在APP.vue中,聲明reload方法,控制router-view模塊的顯示或者隱藏,從而控制頁(yè)面的再次加載.
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
}
}
</script>
在需要刷新的頁(yè)面,直接注入inject的reload依賴,在邏輯操作完成后需要刷新的位置,使用this.reload()調(diào)用,即可刷新當(dāng)前頁(yè)面.
export default {
name: "ItemPage",
components: {},
inject: ["reload"], //注入reload方法
data() {
return {
};
},
methods: {
//頁(yè)面邏輯操作方法
handleClick() {
//此處操作頁(yè)面功能
//.......
this.reload(); //此處刷新頁(yè)面
}
},
mounted() {
}
};
