学习使用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 })
  }
}