實作場景：在頁面中我們要實作每個頁面自己能控制是否快取，即是否每次進入頁面是否需要重繪頁面，每個頁面有不同的需求，并且在全域有一個按鈕能在每個當前頁面按這個按鈕都可以重繪，
想了解vue各種組件的通信方式可以看：https://blog.csdn.net/qq_39009348/article/details/81511981
一、頁面快取
找到頁面的內容區，即系統放頁面的區域：
<keep-alive>
<!-- 是否快取頁面：即每次進入頁面是否重繪，若快取則無法手動重繪頁面 -->
<router-view v-if="$route.meta.keepAlive&&isRouterViewShow"></router-view>
</keep-alive>
<!-- 不快取 -->
<router-view v-if="!$route.meta.keepAlive&&isRouterViewShow"></router-view>路由檔案配置：
二、全域頁面重繪
在全域做了頁面重繪，我們就不需要在每個頁面單獨做重繪了，提供兩種解決方式：一種是重繪路由視圖的方式，一種是在全域呼叫每個頁面的重繪頁面的介面
方式一：（注意：頁面一定不能設定快取，設定快取則沒用）
<!-- 不快取 -->
<router-view v-if="!$route.meta.keepAlive&&isRouterViewShow"></router-view>重繪按鈕函式：
// 頁面重繪
refresh() {
console.log('當前路由', this.$route.name)
/** 控制路由隱藏與顯示辦法重繪每個模塊的資料，但是在路由設定了允許快取后該方法不起作用 */
// 先隱藏
this.isRouterViewShow = false
// $nextTick() 將回呼延遲到下次 DOM 更新回圈之后執行
this.$nextTick(() => {
this.isRouterViewShow = true
})
},方式二：
用兄弟組件的通信方式，去觸發每個兄弟組件的重繪函式，這種方式就不涉及到重繪路由，只是重繪渲染頁面的獲取資料的函式，則可以設定快取與不快取
先main.j是定義vue實體：
// 創建vue空實體
let hub = new Vue()
Vue.prototype.$eventhande = hub // 加入vue原型中，讓所有組件可以訪問到該物件重繪按鈕：
// 頁面重繪
refresh() {
console.log('當前路由', this.$route.name)
// 觸發自定義事件refresh,重繪每個模塊的資料
this.$eventhande.$emit('refresh', this.$route.name)
},每個頁面的重繪頁面：
注意：要傳入每個當前頁面的路由名稱，然后判斷只重繪當前頁面，不然點擊重繪，會觸發所有頁面兄弟組件的重繪事件，我們只想重繪當前打開頁面而已
該監聽函式在created生命周期中寫就好了
// 監聽兄弟組件的自定義事件，并接受傳入的值
this.$eventhande.$on('refresh', (val) => {
// 只重繪當前頁面
if (val === 'MaterialManage') {
this.refresh()
}
}) 轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/302802.html
標籤：其他
上一篇：Vue基礎語法及規范