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

原文官方地址：https://bhuh12.github.io/vue-router-tab/zh/guide/

为了防止网站打不开，在这里记录一下使用方法。

安装：yarn add vue-router-tab or npm i vue-router-tab -S

CDN：

<!-- 引入样式 -->

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vue-router-tab@1.2.5/dist/lib/vue-router-tab.css"
/>
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/vue-router-tab@1.2.5" />

vue.config.js

module.exports = {
  transpileDependencies: ['vue-router-tab']
}

main.js 入口文件

// router-tab 组件依赖 vue 和 vue-router
import Vue from 'vue'
import Router from 'vue-router'

// 引入组件和样式
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')

 

应用组件

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

路由配置

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

// RouterTab 内置路由
import { RouterTabRoutes } from 'vue-router-tab'

// 引入布局框架组件
import Frame from './components/layout/Frame.vue'

// 异步加载页面组件
const importPage = view => () =>
  import(/* webpackChunkName: "p-[request]" */ `./views/${view}.vue`)

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      // 父路由组件内必须包含 <router-tab>
      component: Frame,
      // 子路由里配置需要通过页签打开的页面路由
      children: [
        // 引入 RouterTab 内置路由以支持 Iframe 页签
        ...RouterTabRoutes,
        {
          path: '/', // 默认页和父级路由一致
          name: 'Home',
          component: importPage('Home'),
          meta: {
            title: '首页' // 页签标题
          }
        },
        {
          path: '/page/:id',
          component: importPage('Page'),
          meta: {
            title: '页面', // 页签标题
            icon: 'icon-user', // 页签图标，可选
            tabClass: 'custom-tab', // 自定义页签 class，可选
            tips: '这是一个页面', // 页签提示，可选，如未设置则跟 title 一致
            key: 'path', // 路由打开页签规则，可选
            closable: false // 页签是否允许关闭，默认 `true`
          }
        },
        {
          path: '/404',
          component: importPage('404'),
          meta: {
            title: '找不到页面',
            icon: 'icon-page'
          }
        }
      ]
    },
    {
      // 其他路由 404
      path: '*',
      redirect: '/404'
    }
  ]
})