利用vue做的后臺管理系統是單頁面系統，當你想實作重繪的功能通常有以下幾個方法：
(1)window.location.reload()
這個是原生js中提供的一種重繪方法，用于重繪當前檔案，
(2)this.$router.go(0)
vue-route提供的一種方法，在history記錄中前進或者后退val步，當val為0時重繪當前頁面，
以上兩種方法，用的人都知道，這兩種方法都類似于瀏覽器上的重繪頁面按鈕，回導致頁面出現短暫的閃爍（重新加載頁面），雖然簡單粗暴，但是用戶體驗極差，
其實，區域的重繪就是小組件之間的重繪，最多的重繪場景就是對table串列中某條資料打開dialog框進行增刪改之后重繪table的操作，這種可以每個頁面都單獨寫好一個查詢表格的公共的方法，在mounted周期的時候可以呼叫用于頁面打開的時候默認展示table資料，需要的時候也可以呼叫用于重繪table資料，或是考慮以下兩種方法，但是以下兩種方法其實也是依靠mounted這個鉤子函式來進行重繪的，只是少宣告了一個公共方法而已，
(3)先跳轉到一個空白組件，在跳轉回原組件，觸發鉤子函式重新渲染達到重繪的目的，
首先，先定義一個空白組件：
<template>
<div></div>
</template>
<script>
export default{
data() {
return{
}
},
beforeRouteEnter (to, from, next) {
next(vm=>{
vm.$router.replace({
path:from.fullPath
})
})
},
}
</script>
該空白組件需要在route.js中定義path以及component路徑；其中next(vm=>{})這個里面的代碼塊里的代碼很晚執行，在組件mounted周期之后才會被執行，執行的結果為跳回原組件，然后在需要重繪的地方呼叫this.$router.replace({path:'/XXXX'})，其中XXXX為之前route.js中定義的空白組件的path，導航欄里的url地址切換很快，基本看不到空白組件與原組件之間路徑名切換，
(4)利用組件的provide/inject選項(推薦)，
這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效，
先在App.vue中宣告一個reload方法
<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>
然后在需要重繪的頁面中這樣注入，
<script> export default { inject:['reload'], //注入App.vue組件提供（provide）的 reload 依賴 data () { return { //....... } }, mounted:function(){ //默認請求資料 }, } </script>
最后，在需要重繪的地方直接呼叫this.reload()即可，這樣App.vue中的<router-view></router-view>會因為v-if快速的由顯->隱->顯(true->false->true)，但因為v-if是通過控制dom節點的存在與否來控制元素的顯隱，切換有一個區域編譯/卸載的程序，所以切換程序中會銷毀和重建內部的事件監聽和子組件，以此達到重繪組件的目的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/79798.html
標籤：JavaScript
上一篇：JavaScript 之 函式