業(yè)務場景：在管理后臺芯杀，在執(zhí)行完，增，刪蒸眠，改掌桩，操作的時候尊浪。我們需要刷新一下頁面偶妖，重載數(shù)據(jù)肌访。在JQ中我們會用到location.reload()方法螟蒸，刷新頁面盒使；在vue中，這里需要用到一個 provide / inject 這對用例七嫌。（其他方法：this.$router.go(0)少办，會強制刷新，出現(xiàn)空白頁面體驗不好）
這對選項需要一起使用诵原，以允許一個祖先組件向其所有子孫后代注入一個依賴英妓，不論組件層次有多深挽放，并在起上下游關系成立的時間里始終生效。
實現(xiàn)原理就是通過控制router-view 的顯示與隱藏蔓纠，來重渲染路由區(qū)域辑畦，重而達到頁面刷新的效果，show -> flase -> show
具體代碼如下：
1.首先在我們的根組件APP.vue里面,寫入刷新方法腿倚，路由初始狀態(tài)是顯示的
<pre style="margin: 0px; padding: 0px; overflow-wrap: break-word; font-family: Menlo, Monaco, Consolas, "Courier New", monospace !important; font-size: 15px !important;"><template>
<div id="app">
<keep-alive>
<router-view v-show="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="isRouterAlive"/>
<Tabbar v-show="$route.meta.showFooter"></Tabbar>
</div>
</template>
<script>
2. 樣式重置 common.css
import "./assets/common.css" import SHeader from './components_c/SearchHeader.vue' import Tabbar from './components_c/Tabbar' export default {
name: 'App',
provide(){ return{
reload:this.reload
}
},
data(){ return{
isRouterAlive:true }
},
components:{
SHeader,
Tabbar
},
methods: {
reload (){ this.isRouterAlive = false
this.$nextTick(function(){ this.isRouterAlive = true })
}
}
} </script>
<style lang="scss" scoped>
</style>
<router-view v-if="isRouterAlive"></router-view>
在isRouterAlive 為true的地方 使用刷新 纯出，然后在其他組件或者頁面中調(diào)用相應方法就行
4、然后在子組件中引用
image
4敷燎、執(zhí)行完相應操作之后暂筝，調(diào)用reload方法
image
