初始展示页签

通过配置 RouterTab 组件的 tabs 属性，可以设置进入页面时默认显示的页签。

注意

Nuxt 项目中，页签的配置如果来自于页面 meta，将无法自动获取未激活页签的配置。因此，这种场景不能仅通过 fullpath 方式配置初始页签。

API Demo

示例：

<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: 'Dynamic tab',
          closable: false
        },

        // 具有动态页签标题的页签，需要设置初始页签标题，避免进入页签后标题不一致
        { to: '/initial-tabs/page/1', title: 'Page1' },

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

          title: 'Page2'
        },

        // 默认 key 配置下，该页签与 '/initial-tabs/page/2' 页签的 key 一致，将只保留第一个出现的页签
        { to: '/initial-tabs/page/2?t=1', title: 'Page2-1' },

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