學習使用vue-router tab切換（五）

 

原地址：https://bhuh12.github.io/vue-router-tab/zh/guide/advanced/cache.html#%E9%A1%B5%E7%AD%BE%E7%BC%93%E5%AD%98

緩存控制

頁簽緩存

RouterTab 默認會緩存每個頁簽的頁面

您可以設置 RouterTab 組件的 keep-alive 來取消這一行為，也可以通過路由的 meta.keepAlive 來覆蓋組件默認配置

如果取消了頁簽緩存，每次進入頁簽將重新創建組件實例

全局配置

<router-tab :keep-alive="false" />

路由配置

const route = {
  path: '/my-page/:1',
  component: MyPage,
  meta: {
    title: '頁面',
    keepAlive: false
  }
}

最大緩存數

你可以通過設置 RouterTab 組件的 max-alive 來控制頁簽的最大緩存數，為 0 （默認）則不限制

頁簽數量超過設置值后，最初打開的頁簽緩存將會被清理掉

<router-tab :max-alive="10" />

復用組件

默認情況下，再次打開同一個頁簽的路由，如果路由的 params 或 query 發生改變，RouterTab 會清理上次的頁面緩存，重新創建頁面實例

你可以設置 RouterTab 組件的 reuse 來取消這一行為，也可以通過路由的 meta.reuse 來覆蓋組件默認配置

提示

如果設置了 reuse 為 true，你可能需要通過監聽 $route 或 activated 鈎子來更新頁面數據

全局配置

<router-tab :reuse="true" />

路由配置

const route = {
  path: '/my-page/:1',
  component: MyPage,
  meta: {
    title: '頁面,
    reuse: true // 以不同的 params 或 query 重新打開頁簽后，頁面會復用上一次的，不會重新創建
  }
}

動態頁簽

RouterTab 會監聽組件 this.routeTab 來動態更新頁簽信息。您可以通過設置 this.routeTab 來更改頁簽的標題、圖標、提示。

#通過 computed 計算屬性（推薦）

示例：

export default {
  name: 'GoodsDetail',
  data() {
    return {
      goods: {
        goodsName: '商品名',
        goodsDesc: '商品簡介'
      }
    }
  },
  computed: {
    // 通過計算屬性更新頁簽
    routeTab() {
      // 1. 只更新頁簽標題
      return `商品-${this.goods.goodsName}`

      // 2. 更新多個頁簽信息
      return {
        title: `商品-${this.goods.goodsName}`,
        icon: 'el-icon-goods',
        tips: this.goods.goodsDesc
      }

      // 3. 國際化頁簽標題
      return {
        // 以數組方式定義帶參數列表的國際化，格式：['i18nKey', ...params]
        title: ['routerTab.goods', this.goods.goodsName]
      }
    }
  }
}

通過 data 響應數據

示例：

export default {
  name: 'GoodsDetail',
  data() {
    return {
      goods: {
        goodsName: '商品名',
        goodsDesc: '商品簡介'
      },
      routeTab: null // routeTab 存放在 data 中以支持響應
    }
  },
  mounted() {
    setTimeout(() => {
      // 異步結束后更新頁簽
      this.routeTab = {
        title: `商品-${this.goods.goodsName}`,
        icon: 'el-icon-goods',
        tips: this.goods.goodsDesc
      }
    }, 300)
  }
}

通過路由 meta 配置

示例：

const route = {
  path: '/my-page/:id',
  component: MyPage,
  meta: {
    title: route => `頁面${route.params.id}`
  }
}

初始展示頁簽

通過配置 RouterTab 組件的 tabs 屬性，可以設置進入頁面時默認顯示的頁簽。

注意

Nuxt 項目中，頁簽的配置如果來自於頁面 meta，將無法自動獲取未激活頁簽的配置。因此，這種場景不能僅通過 fullpath 方式配置初始頁簽。

示例：

<template>
  <router-tab :tabs="tabs" />
</template>

<script>
export default {
  name: 'InitialTabs',
  data() {
    return {
      tabs: [
        // 只需設置 fullpath，程序將自動從 router 配置中獲取頁簽的標題/圖標等信息
        // （Nuxt 項目 page meta 方式配置的頁簽路由不支持）
        '/initial-tabs/page-leave',

        // Nuxt 項目需要頁簽的展示的完整配置
        { to: '/initial-tabs/tab-dynamic', title: '異步頁簽', closable: false },

        // 具有動態頁簽標題的頁簽，需要設置初始頁簽標題，避免進入頁簽后標題不一致
        { to: '/initial-tabs/page/1', title: '頁面1' },

        // <router-link> location 方式配置
        {
          to: {
            path: '/initial-tabs/page/2',
            query: { t: 2 }
          },

          title: '頁面2'
        },

        // 默認 key 配置下，該頁簽與 '/initial-tabs/page/2' 頁簽的 key 一致，將只保留第一個出現的頁簽
        { to: '/initial-tabs/page/2?t=1', title: '頁面2-1' },

        // Iframe 頁簽
        `/initial-tabs/iframe/${encodeURIComponent(
          'https://cn.vuejs.org'
        )}/Vue.js/rt-icon-web`
      ]
    }
  }
}
</script>

刷新后還原頁簽

給 RouterTab 組件設置 restore 屬性，可以設置在瀏覽器刷新后還原頁簽。

RouterTab 通過 sessionStorage 來存儲頁簽緩存信息

默認方式

<router-tab restore />

自定義緩存

RouterTab 支持自定義本地存儲的 key，根據給定的 key 來獲取對應的緩存

在實際應用中，我們希望根據當前用戶來存儲瀏覽器頁簽信息。

<router-tab :restore="userInfo.userId" />

監聽 restore 參數

通常，我們的數據會從服務端異步獲取，如果我們希望在用戶數據獲取到后再根據用戶還原頁簽，可以配置 restore-watch 來監聽 restore 參數，改變后自動還原對應用戶的頁簽

<router-tab :restore="userInfo.userId" restore-watch />

頁面離開確認

當頁簽關閉、刷新、替換，離開當前路由，或瀏覽器窗口關閉、刷新時，會觸發 beforePageLeave，通過 Promise 來允許或者阻止頁簽頁面的離開。

注意

beforePageLeave 在組件的最外層，不是放在 methods 里

示例：

export default {
  /**
   * 頁面離開前確認
   * @param {Object} tab 頁簽信息
   * @param {String} type 離開類型：
   *   close: 頁簽關閉
   *   refresh: 頁簽刷新
   *   replace: 頁簽被替換
   *   leave: 路由離開
   *   unload: 瀏覽器刷新或者關閉
   * @returns {String|Promise}
   */
  beforePageLeave(tab, type) {
    // 值未改變，則直接離開頁簽
    if (this.editValue === this.value) return

    // 瀏覽器窗口刷新或者關閉時，支持的瀏覽器會展示確認消息
    if (type === 'unload') {
      return `您在“${tab.title}”頁簽的更改尚未完成，是否要離開？`
    }

    // 離開類型
    const action = {
      close: '關閉',
      refresh: '刷新',
      replace: '替換',
      leave: '離開'
    }[type]

    const msg = `您確認要${action}頁簽“${tab.title}”嗎？`

    // 返回 promise，resolve 離開，reject 阻止離開
    return new Promise((resolve, reject) => {
      // 值改變則確認提示
      if (confirm(msg)) {
        resolve()
      } else {
        reject(`您拒絕了${action}頁簽`)
      }
    })

    // 此處使用了 Element 的 confirm 組件
    // 需將 closeOnHashChange 配置為 false，以避免路由切換導致確認框關閉
    // return this.$confirm(msg, '提示', { closeOnHashChange: false })
  }
}