前言：在日常项目中，会遇到页面顶部要求有 路由标签 的需求，基本功能要求，标签新增，关闭，拖拽，刷新，点击页面切换，长度超出内容滚动等 。在 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 插件，实现页面顶部路由标签功能。】

 
使用elementUi的tabs组件 + vuex 实现点击菜单或者点击按钮新增一个tab标签页
 
一、思路
 
由于之前一直做的单页面项目都是使用路由控制实现的路由改变销毁原有组件加载新组件的方式，是view区域始终只有一个路由的方式实现单页面的管理系统，后面接到一个新的项目后发现原来的逻辑对于新需求不太适应，首先新的需求要求，打开的页面或者类页面的tab标签页数量上可能是无限的，这样对于使用路由逻辑上就不太好实现，比如我现在需要打开N个订单详情，路由控制的方式就比较麻烦了，虽然可以用keep-alive 标签来控制和保存参数，但是各个页面之间的交互以及菜单与tab方面的切换，还有国际化做起来就比较麻烦。后面就想到使用elementUi的tabs组件和vuex来做，因为tabs组件效果上看上去和浏览器的新标签打开页面效果比较相似，这样可以减少很多交互效果的css和js书写，不过这个组件也有很多坑(具体后面再说)
 
1.产品想要的效果
 

 
image
 
首先点击一个菜单项生成一个tab页面，其他的页面或者组件也能通过点击生成tabs 相同的组件但是除菜单的不可以重复外其他入口的是可以无限打开的，比如订单详情
 

 
image
 
点击x的时候关闭当前页面，点击刷新标识的时候刷新当前页面的数据。
 
2 菜单效果
 

 
image
 
菜单实现分为三级菜单、一、二级 为展开式菜单，三级菜单为弹出式菜单(这个菜单踩了不少坑)因为这个项目是一开始就确定使用elementUi来做的，这次是属于重构所以优先考虑的是使用elementUi自带的组件来实现这个效果，但是这个效果显然 没有现成的 elementUi的API上只有全展开或者全弹出式的菜单没有这种混合的，后面是做其他业务模块的时候使用到了Popover弹出 组件 于是来了灵感使用 于是使用 NavMenu + Popover 的方式实现了这种混合菜单。
 
上干货：
 
el-menu
 
:unique-opened="true"
 
class="el-menu_nav"
 
collapse-transition
 
:collapse="isCollapse"
 
:default-active="activeTabName"
 
@select="addTab">
 
:index="item.index"
 
:key="index"
 
v-if="!item.children"
 
v-for="(item,index) in navList"
 
>
 
{{item.title}}
 
background-color="#fff"
 
:index="item.index"
 
:key="index"
 
v-if="item.children"
 
v-for="(item,index) in navList"
 
>
 
{{item.title}}
 
v-if="!it.children||it.children.length==0"
 
:index="it.index"
 
:key="indexChild"
 
v-for="(it,indexChild) in item.children">
 
{{it.title}}
 
class="sencond_menu_children"
 
v-if="it.children && it.children.length>=1"
 
:index="it.index"
 
:key="indexChild"
 
v-for="(it,indexChild) in item.children">
 
placement="right-start"
 
title=""
 
width=""
 
trigger="hover"
 
v-if="!isCollapse"
 
v-model="it.visible"
 
>
 
@click="addTab(it1.index),it.visible = false"
 
:index="it1.index"
 
:key="indexChild1"
 
v-for="(it1,indexChild1) in it.children">
 
{{it1.title}}
 
{{it.title}}
 
{{it.title}}
 
v-if="isCollapse"
 
:index="it1.index"
 
:key="indexChild1"
 
v-for="(it1,indexChild1) in it.children">
 
{{it1.title}}
 
通过v-if 选择三级级菜单的显示方式 丢弃原组件自带的三级菜单给二级菜单绑定新的hover事件显示弹出三级菜单 这里要注意一个点就是三级菜单的切换时 el-menu 这个组件自带的切换效果是上下式的 我们是不希望这样的 所以要重新定义这个样式 使用 下面的写法禁用掉二级菜单的动画
 
// 重置二级副菜单的样式
 
.el-submenu.is-opened.sencond_menu_children > .el-submenu__title .el-submenu__icon-arrow{
 
transform:none !important;
 
}
 
下面是store的写法
 
state : {
 
// 管理tabs标签
 
activeTabName: "home",
 
tabList: [
 
{
 
label: '主页',
 
name: 'home',
 
param:{},
 
disabled: false,
 
closable: false,
 
component: appDashboard
 
}
 
],
 
navBaseInfo:navBaseInfo,
 
searchList:searchList,//这个是用来实现页面多个enter事件的定位的配置表
 
},
 
//实现组件懒加载
 
const componentsOne = resolve => require(['@/components/one'], resolve)
 
//这个对象只是用来新增tab是取组件方便的
 
let components = {
 
componentsOne:componentsOne
 
}
 
/**
 
* 新增菜单类型的tab
 
*@param state {Object} 当前的状态对象
 
*@param name {String} 必传信息 当前需要打开的tab的关键字
 
*/
 
addTab(state, index) {
 
let isRefresh = false
 
JSON.parse(sessionStorage.getItem('osMenuArr')).filter(f => {
 
if (f.menu_index == index) {
 
isRefresh = f.is_refresh == 1? true : false
 
}
 
})
 
//第一个版本
 
//let const componentsOne = resolve => require(['@/components/one'], resolve)
 
if (state.tabList.filter(f => f.name == index) == 0) {
 
state.tabList.push({
 
label: '',
 
name: index,
 
param:{},
 
disabled: false,
 
refresh:isRefresh || false,
 
closable: true,
 
//component: componentsOne, 这是第一个版本的写法 这样写前面的components 对象和 组件懒加载可以不用定义，但是这个方法有一个巨坑 就是最后打包上线的时候文件会变的巨大，所以最后优化的时候舍弃了
 
component: components[index]
 
})
 
}
 
state.activeTabName = index
 
},
 
/**
 
* 新增非菜单类型的tab
 
*@param tab {Object} 当前需要新打开的tab的标签信息
 
*@param tab.title {String} 必传信息 当前需要打开的tab的标题
 
*@param tab.index {String} 必传信息 当前需要打开的tab的关键字
 
*@param tab.param {Object} 必传信息 当前tab页面需要的参数
 
*@param tab.beforeCloseam {Function} 关闭前的函数
 
*@param tab.afterClose {Function} 关闭窗口后的函数
 
*/
 
addNewNotMenuTab(state, tab) {
 
let title = tab.title || "New Page",
 
index = tab.index,
 
random = parseInt(new Date().getTime())
 
if(!tab.index){
 
alert("Jump param is error， Please check ！")
 
return false
 
}
 
let name = tab.isNoRandom?index : index + random
 
if (state.tabList.filter(f => f.name == name) == 0) {
 
state.tabList.push({
 
label: title,
 
not_menu:true,
 
name:name,
 
disabled: false,
 
closable: true,
 
refresh:tab.refresh || false,
 
param:tab.param||{},
 
component: components[index],
 
beforeClose:tab.beforeClose,
 
afterClose:tab.afterClose,
 
})
 
}
 
state.activeTabName = tab.isNoRandom?index : index + random
 
},
 
async closeTab(state, name,callback) {
 
if(typeof name == "function"){
 
console.log("close param is Erorr")
 
return false
 
}
 
let tab = state.tabList.filter(f => f.name == name)[0]
 
if(!tab){
 
return false
 
}
 
let index = state.tabList.indexOf(tab)
 
if(state.tabList[index].beforeClose){
 
try{
 
await new Promise((resolve, reject) => state.tabList[index].beforeClose(resolve, reject))
 
} catch (e) {
 
return false
 
}
 
}
 
if (index != state.tabList.length - 1) {
 
state.activeTabName = state.tabList[index + 1].name
 
} else {
 
state.activeTabName = state.tabList[index - 1].name
 
}
 
state.tabList[index].afterClose && state.tabList[index].afterClose()
 
state.tabList = state.tabList.filter(f => f.name != name)
 
callback && callback()
 
},
 
tabs页面结构
 
 {{item.not_menu?item.label:$t('message.menu.'+item.name)}}
 
定义完这几个方法基本上需要实现的就差不多了可以了
 
最后为了方便就是把当前的这些方法挂载到全局上，毕竟都要用到的 不用每个页面都去引用一次vuex 那样很麻烦
 
import { mapMutations } from 'vuex'
 
export default {
 
install(Vue, options) {
 
//特殊发送请求
 
Vue.prototype.$restful = restful;
 
// 公用发送请求
 
Vue.prototype.$sendReq = sendReq;
 
// 关闭tab
 
Vue.prototype.$closeTab = mapMutations('navTabs', ['closeTab']).closeTab
 
// 新增tab
 
Vue.prototype.$addTab = mapMutations('navTabs', ['addTab']).addTab
 
// 新增一个非菜单tab
 
Vue.prototype.$addNewNotMenuTab = mapMutations('navTabs', ['addNewNotMenuTab']).addNewNotMenuTab
 
}
 
}
 
最后有一个小坑就是 回车事件 enter这个坑了 由于以前都是采取组件销毁的方式实现的 所以在组件里面单独实现是没问题的但是现在因为要实现很多页面都需要实现回车 这些页面又是同时存在的 所以就会出现 谁先出现谁生效，或者谁后出现谁生效的情况
 
解决思路
 
在tab切换的时候定位到tab的index关键字段 把这个字段给ref属性 即 activeName == index ==ref
 
所以可以使用下面的方法来实现,这个方法一定要等页面元素加载完再绑定要不会报错
 
document.onkeydown = function(e) {
 
//捕捉回车事件
 
let ev = (typeof event!= 'undefined') ? window.event : e;
 
if(ev.keyCode == 13) {
 
if(self.$store.state.navTabs.searchList.indexOf(self.activeTabName)>-1)self.$refs[self.activeTabName][0].search && self.$refs[self.activeTabName][0].search()
 
}
 
}
 
不过elementUi的 tabs组件有一个最大的坑就是不能做拖拽排序和拖拽替换，这个是一个坑 到目前没找到解决方法 如有知道的小伙伴可以@一下 后面有时间再分享一个国际化的实现吧
 
以上就是本次文章全部内容

tab切换效果如下：
 
注：（图片用的public静态资源管理）
 
 
 
 
上方的标题和下方的图片用的是两个块，是兄弟节点，所以需要点击tab标题和下方的图片一一对应
利用vue提供的v-for指令遍历得到索引和值
 
 
html结构（两块结构）：
 
<template>
   <div id="app">
      <!--  导航  -->
      <ul class="tab-tilte">
         <li v-for="(item,index) in title"
             :key="index"
             @click="num=index"
             :class="{active:num == index}"
         >
            {{item}}
         </li>
      </ul>
      <!--  内容  -->
      <ul class="tab-content">
         <li v-for="(item,index) in content"
             :key="index"
             v-show="num==index"
         >
            <img :src="item" alt="">
         </li>
      </ul>
   </div>
</template>
 
简单写一下css样式：
 
<style lang="scss" scoped>
   #app {
      ul li {
         list-style: none;
      }
      .tab-tilte {
         height: 50px;
         line-height: 50px;
         display: flex;
         justify-content: space-around;
         li {
            width: 20%;
            text-align: center;
            background-color: #eee;
            cursor: pointer; /* 鼠标变小手 */
         }
      }
      /* 动态绑定class 点击标题改变样式 */
      .tab-tilte .active {
         background-color: #ff1100;
         color: #fff;
      }
      img {
         width: 100%;
         height: 100%;
      }
   }
</style>
 
vue实现代码：
 
<script>
   export default {
      data() {
         return {
            title: ['标题一', '标题二', '标题三', '标题四', '标题五'],
            content: [
               "http://localhost:8080/images/car1.jpg",
               "http://localhost:8080/images/car2.jpg",
               "http://localhost:8080/images/car3.jpg",
               "http://localhost:8080/images/car4.jpg",
               "http://localhost:8080/images/car5.jpg",
            ],
            num: 0,
         }
      }
   }
</script>

新建项目
 1、安装：npm install vue-router或cnpm install vue-router或yarn add vue-router
 2、在src文件夹下新建router.js中引用如下代码
 import Vue from ‘vue’
 import VueRouter from ‘vue-router’
 Vue.use(VueRouter)
 3、在src中新建views文件夹，在views新建例如：Home文件夹，在文件夹中新建index.vue
 
<template>
  <div id="home">
      <Content />
  </div>
</template>
<script>
  import Content from "../../components/Content.vue"  //这行代码可有可无，Content是组件
  export default {
    name: "index",
    data(){
        return{
        }
    },
    components:{
        Content,
    },
    methods:{
    }
  }
</script>
<style scoped>
</style>
 
渲染tab切换在index文件中
 
<router-link to="/home/text1">
      <span>text1</span>
    </router-link>
    <router-link to="/home/text2">
      <span>text2</span>
    </router-link>
    <router-link to="/home/text3">
      <span>text3</span>
    </router-link>
    <router-view></router-view>
 
4.在router.js中设置如下两步
 
//第一步
import Home from './views/Home/'
import List from './views/List/'
// 组件
import Text1 from './components/Text1'
import Text2 from './components/Text2'
import Text3 from './components/Text3'  
//第二部
export default new VueRouter({
    //配置路由信息  
    routes: [
        {
            path: '/',
            redirect: '/home'  //设置默认指向
        },
        {
            path: '/home',
            component: Home,
            // Vue中使用children实现路由的嵌套
            // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，
            // 否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
			//	tab切换
            children: [
                {
                    path: '/',
                    redirect: 'text1'  //设置默认指向
                },
                {
                    path: 'text1',
                    component: Text1,
                },
                {
                    path: 'text2',
                    component: Text2,
                },
                {
                    path: 'text3',
                    component: Text3,
                }
            ]
        },
        //新建list页面
        {
            path: '/list',
            component: List
        },
    ]
})
 
tab切换目录
 
 
<template>
  <div>
    text3
  </div>
</template>

<script>

  export default {
    components:{
    },
  }
</script>

<style scoped>

</style>
 
5、在App.vue中的div内引入
 
<router-view></router-view>
 
6、在main.js中 import router from ‘./router’
 在new的实例中增加router，具体如下：