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