在開發Vue項目過程中，遇到頁面樣式混亂情形。後發現可通過刷新頁面解決該問題，經過問題探究，發現使用最簡單的頁面刷新方法location.reload()或this.$router.go(0)均會導緻頁面刷新過程中出現空白現象的發生，用戶體驗不佳，故繼續探究解決方法。
業務場景在管理後台，在執行完，增，删，改，操作的時候。我們需要刷新一下頁面，重載數據。在JQ中會用到location.reload()方法刷新頁面；在vue中，需要用到一個 provide / inject 這對用例。（其他方法：this.$router.go(0)，會強制刷新，出現空白頁面,用戶體驗不佳。）
注：provide / inject 這對選項需要一起使用，以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，并在其上下遊關系成立的時間裡始終生效。
實現原理通過控制router-view 的顯示與隐藏，來重渲染路由區域，從而達到頁面刷新的效果，show -> flase -> show
應用代碼1.首先在我們的根組件APP.vue裡面,寫入刷新方法，路由初始狀态是顯示的。
<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
})
}
},
components:{
}
}
</script>
2.然後在子組件裡面進行引用
3.在執行完相應的操作，後調用reload方法
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
