# Getting Started

# Import RouterTab

Example:

main.js entry file

// router-tab requires vue and vue-router
import Vue from 'vue'
import Router from 'vue-router'

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

import App from './App.vue'
import router from './router'

Vue.config.productionTip = false
Vue.use(RouterTab)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

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

# Use Component

More props at RouterTab Props

WARNING

RouterTab only supports singleton mode, do not introduce multiple RouterTab components in the same page!

Example:

components/layout/Frame.vue layout file

<template>
  <div class="app-header">Header</div>
  <div class="app-body">
    <div class="app-side">Sider</div>
    <router-tab />
  </div>
</template>

1
2
3
4
5
6
7

# Router Config

Integrate RouterTabRoutes into your router config to support iframe Tab
Set title, icon, tooltip and cache rule in meta.

Details at Route.meta

WARNING

RouterTab need a default route, we can do this in two ways：

redirect: redirect to the default route
the path of default route must keep the same with parent route。

Example:

router.js router

import Vue from 'vue'
import Router from 'vue-router'

// RouterTabRoutes
import { RouterTabRoutes } from 'vue-router-tab'

// layout component
import Frame from './components/layout/Frame.vue'

// lazy load
const importPage = view => () =>
  import(/* webpackChunkName: "p-[request]" */ `./views/${view}.vue`)

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      // parent component must contain <router-tab>
      component: Frame,
      // routes that serve as tab contents
      children: [
        // integrate RouterTabRoutes to support iframe tabs
        ...RouterTabRoutes,
        {
          path: '/', // the same with parent route
          name: 'Home',
          component: importPage('Home'),
          meta: {
            title: 'Home'
          }
        },
        {
          path: '/page/:id',
          component: importPage('Page'),
          meta: {
            title: 'Page', // tab title
            icon: 'icon-user', // tab icon, optional
            tabClass: 'custom-tab', // custom class, optional
            tips: 'This is a tab', // tab tooltip, optional. defaults to `meta.title`
            key: 'path', // tab cache rule, optional
            closable: false // is tab closable, defaults to `true`
          }
        },
        {
          path: '/404',
          component: importPage('404'),
          meta: {
            title: 'Page Not Found',
            icon: 'icon-page'
          }
        }
      ]
    },
    {
      // others
      path: '*',
      redirect: '/404'
    }
  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# 👨‍💻 Sample Project

router-tab-sample

Github (opens new window)

CodeSandbox (opens new window)

← Installation Nuxt →