学习使用vue-router tab切换（三）

页签规则

页签规则定义了路由打开页签的方式。

通过配置路由的 meta.key 属性，您可以定制路由页签规则

默认规则

默认情况下，同一路由打开同一个页签

内置规则

path

• 规则：route => route.path
• 说明：相同 route.params 的路由，route.path 一致，共用页签

示例：

const route = {
  path: '/my-page/:id',
  component: MyPage,
  meta: {
    title: '页面',
    key: 'path'
  }
}

根据示例中的页签规则：

1. /my-page/1和/my-page/2 的 params 参数不同，会打开独立的页签
2. /my-page/1、/my-page/1?a=1和/my-page/1?b=2 的 params 参数相同，会共用同一个页签

fullPath

• 规则：route => route.fullPath.replace(route.hash, '')
• 说明：相同 route.params 和 route.query 的路由，route.fullPath 去除 hash 后一致，共用页签

示例：

const route = {
  path: '/my-page/:id',
  component: MyPage,
  meta: {
    title: '页面',
    key: 'fullPath'
  }
}

自定义规则

除了使用内置规则，你还可以用函数自定义控制

示例：

const route = {
  path: '/my-page/:catalog/:type',
  component: MyPage,
  meta: {
    title: '定制规则',
    key(route) {
      return `/my-page/${route.params.catalog}`
    }
  }
}

根据示例中的页签规则：

1. /my-page/a/1 和 /my-page/a/2，params.catalog 相同，打开的是同一个页签
2. /my-page/a/1 和 /my-page/b/1，params.catalog 不同，则打开独立的页签

Iframe 页签

outerTab 支持通过 Iframe 页签嵌入外部网站。

注意

该功能需要引入 RouterTab 内置路由，请参考 基础 - 路由配置

Iframe 页签操作

打开 Iframe 页签

// 三个参数分别为：链接、页签标题、图标
this.$tabs.openIframe('https://cn.vuejs.org', 'Vue.js', 'icon-web')

关闭 Iframe 页签

this.$tabs.closeIframe('https://cn.vuejs.org')

刷新 Iframe 页签

this.$tabs.refreshIframe('https://cn.vuejs.org')

Iframe 页签事件

RouterTab 支持以下的 Iframe 页签事件：

• iframe-mounted iframe 节点挂载就绪

• iframe-loaded iframe 内容加载成功

需要注意的是，iframe 内部链接跳转也会触发 iframe-loaded 事件

示例：

<template>
  <router-tab @iframe-mounted="iframeMounted" @iframe-loaded="iframeLoaded" />
</template>

<script>
export default {
  methods: {
    // iframe 节点挂载就绪
    iframeMounted(url, iframe) {
      console.log('iframe-mounted:', url, iframe.contentWindow)
    },

    // iframe 内容加载成功
    iframeLoaded(url, iframe) {
      console.log('iframe-loaded:', url, iframe.contentWindow)
    }
  }
}
</script>