vue 中使用 vue-router-tab 插件实现页面顶部路由标签功能 ？

前言：在日常项目中，会遇到页面顶部要求有 路由标签 的需求，基本功能要求，标签新增，关闭，拖拽，刷新，点击页面切换，长度超出内容滚动等 。在 vue 项目中考虑使用 vue-router-tab 插件 去实现改需求，下面对其用法做相关示例 。

---

• 安装依赖 （官方推荐 yarn）

npm i vue-router-tab -S
// 或者
cnpm i vue-router-tab -S
// 或者
yarn add vue-router-tab 

• main.js 中全局引入

// 引入组件和样式，router-tab 组件依赖 vue 和 vue-router
import RouterTab from 'vue-router-tab'
import 'vue-router-tab/dist/lib/vue-router-tab.css'
Vue.use(RouterTab)

• 配置路由 (router 文件夹下 index.js 文件)

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

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

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

Vue.use(Router)

const routes = [
    // ...RouterTabRoutes,
    {
        path: '/',
        name: 'Home',
        component: importPage('Home'),
        meta: {
            title: '首页',
            closable: false
        }
    },
    {
        path: '/demo',
        name: 'Demo',
        component: importPage('Demo'),
        meta: {
            title: '项目组件'
        }
    },
    {
        path: '/demo/bzt',
        name: 'BZT',
        component: importPage('BZT'),
        meta: {
            title: '饼状图组件'
        }
    },
    {
        path: '/demo/dtpxzzt',
        name: 'DTPXZZT',
        component: importPage('DTPXZZT'),
        meta: {
            title: '动态排序柱状图组件'
        }
    }, {
        path: '/demo/jbddmjt',
        name: 'JBDDMJT',
        component: importPage('JBDDMJT'),
        meta: {
            title: '渐变堆叠面积图组件'
        }
    }, {
        path: '/demo/ndgemgt',
        name: 'NDGEMGT',
        component: importPage('NDGEMGT'),
        meta: {
            title: '南丁格尔玫瑰图组件'
        }
    }, {
        path: '/demo/qthxt',
        name: 'QTHXT',
        component: importPage('QTHXT'),
        meta: {
            title: '嵌套环形图组件'
        }
    }, {
        path: '/demo/sdt',
        name: 'SDT',
        component: importPage('SDT'),
        meta: {
            title: '散点图组件'
        }
    }, {
        path: '/demo/xnfxt',
        name: 'XNFXT',
        component: importPage('XNFXT'),
        meta: {
            title: '性能分析图组件'
        }
    }, {
        path: '/demo/zftxt',
        name: 'ZFTXT',
        component: importPage('ZFTXT'),
        meta: {
            title: '正负条形图组件'
        }
    }, {
        path: '/demo/zxt',
        name: 'ZXT',
        component: importPage('ZXT'),
        meta: {
            title: '折线图组件'
        }
    }, {
        path: '/demo/zzhht',
        name: 'ZZHHT',
        component: importPage('ZZHHT'),
        meta: {
            title: '折柱混合图组件'
        }
    }, {
        path: '/demo/zzt', // 默认页和父级路由一致
        name: 'ZZT',
        component: importPage('ZZT'),
        meta: {
            title: '柱状图组件' // 页签标题
        }
    },
    {
        path: '/notice',
        component: importPage('Notice'),
        meta: {
            title: '公告页面'
        }
    },
    {
        path: '/404',
        component: importPage('404'),
        meta: {
            title: '找不到页面',
            icon: 'icon-page'
        }
    }
]

export default new Router({
    routes
})

• 创建 components/layout/Frame.vue 布局组件（结合 element-ui）

• SideMenu 组件 （左侧菜单，控制页面切换，结合 element-ui）

【完整示例链接：vue-router-tab: 在 vue 项目中，使用 vue-router-tab 插件，实现页面顶部路由标签功能。】