vue刷新當(dāng)前頁(yè)面， vue如何刷新當(dāng)前頁(yè)面？不知道小伙伴們今天來(lái)看看邊肖的分享吧！
Vue可以通過(guò)三種方式刷新當(dāng)前頁(yè)面：
Method 1: this. $router.go(0)
利用歷史中前進(jìn)后退的函數(shù)，傳入0刷新當(dāng)前頁(yè)面。但是有一個(gè)問(wèn)題就是頁(yè)面在整個(gè)刷新過(guò)程中會(huì)出現(xiàn)空白，嚴(yán)重影響用戶的體驗(yàn)，效果也不好。
this.$router.go(0)
方法二：location.reload()
使用直接刷新當(dāng)前頁(yè)面的方法。但是也有一個(gè)問(wèn)題，整個(gè)刷新過(guò)程中頁(yè)面會(huì)出現(xiàn)空白，嚴(yán)重影響用戶體驗(yàn)，效果也不好。方法1的現(xiàn)象一直都有，不推薦。
location.reload()
方法3:提供/注入組合
允許一個(gè)祖先組件向它的所有后代注入一個(gè)依賴項(xiàng)，不管組件層次有多深，只要建立了上下游關(guān)系，它就會(huì)一直生效。
提供：選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回對(duì)象的函數(shù)。該對(duì)象包含可以注入其子對(duì)象的屬性。
Inject:一個(gè)字符串?dāng)?shù)組，或者一個(gè)對(duì)象，它的鍵是本地綁定名。
注意：提供和注入綁定沒(méi)有響應(yīng)。這是故意的。如果傳入一個(gè)可以被監(jiān)視的對(duì)象，其對(duì)象的屬性仍然是有響應(yīng)的。
基本使用步驟如下：
第一步：(App.vue)
通過(guò)$nextTick()，幫助實(shí)現(xiàn)。先移除router-view/再移除后再次添加刷新當(dāng)前頁(yè)面。是目前最適合的實(shí)現(xiàn)方式。
template
div id=app
router-view v-if=isRouterAlive/
/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
步驟二：(chapter.vue)
inject: [reload],
Schritt III(章節(jié).視圖)
直接調(diào)用this.reload()刷新當(dāng)前頁(yè)面。
This.reload()//需要刷新頁(yè)面。
vue刷新當(dāng)前頁(yè)面，以上就是本文為您收集整理的vue刷新當(dāng)前頁(yè)面最新內(nèi)容，希望能幫到您！更多相關(guān)內(nèi)容歡迎關(guān)注。
