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）

<template>
  <div>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <Side-Menu></Side-Menu>
        </el-aside>
        <el-main>
          <router-tab />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from './Header.vue'
import SideMenu from './SideMenu.vue'
export default {
  components: {
    Header,
    SideMenu
  }
}
</script>

<style>
.el-header{
  background-color: #b3c0d1;
  color: white;
  text-align: center;
  height:60px;
  line-height:60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: left;
  height:800px;
}

.el-main {
  height:800px;
  border-bottom:1px solid #DCDFE6;
}
</style>

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

<template>
  <div>
    <el-col :span="24">
      <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handleSelect" :unique-opened="true" background-color="#d3dce6" text-color="#409EFF" active-text-color="#F56C6C" :router="true">
        <el-menu-item index="/">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="/SimpleDemo">
          <template slot="title">
            <i class="el-icon-s-data"></i>
            <span>简单项目</span>
          </template>
          <el-menu-item index="/demo/bzt">饼状图组件</el-menu-item>
          <el-menu-item index="/demo/zxt">折线图组件</el-menu-item>
          <el-menu-item index="/demo/zzt">柱状图组件</el-menu-item>
          <el-menu-item index="/demo/sdt">散点图组件</el-menu-item>
        </el-submenu>
        <el-submenu index="/ComplexDemo">
          <template slot="title">
            <i class="el-icon-s-data"></i>
            <span>复杂项目</span>
          </template>
          <el-menu-item index="/demo/dtpxzzt">动态排序柱状图组件</el-menu-item>
          <el-menu-item index="/demo/jbddmjt">渐变堆叠面积图组件</el-menu-item>
          <el-menu-item index="/demo/ndgemgt">南丁格尔玫瑰图组件</el-menu-item>
          <el-menu-item index="/demo/qthxt">嵌套环形图组件</el-menu-item>
          <el-menu-item index="/demo/xnfxt">性能分析图组件</el-menu-item>
          <el-menu-item index="/demo/zftxt">正负条形图组件</el-menu-item>
          <el-menu-item index="/demo/zzhht">折柱混合图组件</el-menu-item>
        </el-submenu>
        <el-menu-item index="/notice">
          <i class="el-icon-document"></i>
          <span slot="title">公告页面</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'SideMenu',
  data() {
    return {
      defaultActive: '/'
    }
  },
  // 监听路由变化，在顶部标签切换时，左侧菜单项选中值也变化
  watch: {
    $route(to, from) {
      from
      this.defaultActive = to.path
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

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