vue項目頁面緩存，全局重新整理

實作場景：在頁面中我們要實作每個頁面自己能控制是否緩存，即是否每次進入頁面是否需要重新整理頁面，每個頁面有不同的需求，并且在全局有一個按鈕能在每個目前頁面按這個按鈕都可以重新整理。

想了解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()
            }
        })