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