# Nuxt

# 引入组件

# 插件

plugins/routerTab.js

import Vue from 'vue'
import RouterTab from 'vue-router-tab'
import 'vue-router-tab/dist/lib/vue-router-tab.css'

Vue.use(RouterTab)

1
2
3
4
5

# Iframe 页面

pages/-Iframe.js

export { Iframe as default } from 'vue-router-tab'

# Nuxt 配置

nuxt.config.js

export default {
  // 引入 routerTab 插件
  plugins: ['@/plugins/routerTab'],

  router: {
    extendRoutes(routes, resolve) {
      // 扩展 Iframe 路由
      routes.push({
        name: 'iframe',
        path: '/iframe/:src/:title?/:icon?',
        component: resolve(__dirname, 'pages/-Iframe.js'),
        props: true
      })
    }
  },

  build: {
    // Babel 转译依赖
    transpile: ['vue-router-tab']
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 应用组件

配置参考: RouterTab 配置参数

警告

RouterTab 仅支持单例模式，请勿在同一个页面中引入多个 RouterTab 组件！

# 布局文件

layouts/default.vue

<template>
  <div class="app-header">头部</div>
  <div class="app-body">
    <div class="app-side">侧边栏</div>
    <router-tab />
  </div>
</template>

1
2
3
4
5
6
7

# 页签配置

# 页面文件

pages/about.vue

<template>
  <h2>About</h2>
</template>

<script>
  export default {
    meta: {
      title: 'About',
      closable: false
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# 👨‍💻 示例项目

router-tab-nuxt-sample

Github (opens new window)

CodeSandbox (opens new window)

← 入门页签操作 →