vue面包屑结合tabs
data中定义
data():{
// 菜单列表
tabsValue: ‘’, // 当前显示的选项卡对应的子组件路由
tabs: [], // tabs选项卡列表 name就是路由path comp决定该tab显示哪个子组件页面label:tab标题
menu: [], // 菜单列表
}
定义路由
export default new VueRouter({
routes: [{
path: '/',
name: 'Home',
// components:HelloWorld
component: () => import("../views/HomeView"),
},
{
// 用户登陆路由
path: "/Home",
component: () => import("../views/HomeThree"),
children: [{
path: "/menu",
component: () => import("../views/permissions/menuManagement/menu"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
{
path: "/permissions/list",
component: () => import("../views/permissions/role/list"),
meta: {
tabInfo: {
component: 'permissions',
label: '系统角色',
path: '/permissions/list'
}
}
},
{
path: "/list",
component: () => import("../views/permissions/user/list"),
meta: {
tabInfo: {
component: 'list',
label: '系统用户',
path: '/list'
}
}
},
{
path: "/department",
component: () => import("../views/permissions/managementDepartment/department"),
meta: {
tabInfo: {
component: 'department',
label: '机构管理',
path: '/department'
}
}
},
// 添加机构测试
{
path: "/addAgency",
component: () => import("../views/permissions/user/addAgency"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
// 工作台
{
path: "/antifraudOperation/antifraudWorkbench",
component: () => import("../views/antifraudOperation/antifraudWorkbench"),
meta: {
tabInfo: {
component: 'antifraudWorkbench',
label: '反欺诈工作台',
path: '/antifraudOperation/antifraudWorkbench'
}
}
},
//闭环分析
{
path: "/antifraudOperation/closedloopAnalysis",
component: () => import("../views/antifraudOperation/closedloopAnalysis"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
//数据汇总
{
path: "/antifraudOperation/dataAggregation",
component: () => import("../views/antifraudOperation/dataAggregation"),
meta: {
tabInfo: {
component: 'dataAggregation',
label: '案件汇总查询',
path: '/antifraudOperation/dataAggregation'
}
}
},
//疑似欺诈数据库
{
path: "/antifraudOperation/suspectedFrauddatabase",
component: () => import("../views/antifraudOperation/suspectedFrauddatabase"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
//详情
{
path: "/antifraudOperation/details",
component: () => import("../views/antifraudOperation/details"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
//详情
{
path: "/antifraudOperation/details2",
component: () => import("../views/antifraudOperation/details2"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
// 反欺诈闭环数据分析
{
path: "/relationshipGraph/relationship",
component: () => import("../views/relationshipGraph/relationship"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
// 反欺诈闭环分析
{
path: "/relationshipGraph/analysisOfthe",
component: () => import("../views/relationshipGraph/analysisOfthe"),
meta: {
tabInfo: {
component: 'analysisOfthe',
label: '反欺诈闭环数据分析',
path: '/relationshipGraph/analysisOfthe'
}
}
},
// 案件统计量
{
path: "/dataStatistics/statisticsOfcases",
component: () => import("../views/dataStatistics/statisticsOfcases"),
meta: {
tabInfo: {
component: 'statisticsOfcases',
label: '数据统计量',
path: '/dataStatistics/statisticsOfcases'
}
}
},
// 案件统计量
{
path: "/dataStatistics/addressIssues",
component: () => import("../views/dataStatistics/addressIssues"),
meta: {
tabInfo: {
component: 'addressIssues',
label: '案件处理统计',
path: '/dataStatistics/addressIssues'
}
}
},
// 基础配置
{
path: "/basicConfiguration/index",
component: () => import("../views/basicConfiguration/index"),
meta: {
tabInfo: {
component: 'basicConfigurationindex',
label: '公司配置',
path: '/basicConfiguration/index'
}
}
},
],
},
]
})
左边菜单栏部分（菜单通过后台数据渲染）
<el-aside :width="asideWidth">
<el-menu class="menu" :default-active="$route.path" router>
<template v-for="(item, index) in menu">
<!-- 遍历生成菜单的时候根据对象是否有subMenu来判断是否有二级菜单,没有就直接生成一级菜单 -->
<el-submenu v-if="item.children" :index="item.children[0].path" :key="index + '-Susuk'">
<template slot="title">
<span slot="title"> <i class=" el-icon-s-order" style="margin-right: 8px;"></i><span
class="menu_title">{{ item.label }}</span></span>
</template>
<el-menu-item-group>
<el-menu-item v-for="item2 in item.children" :key="item2.id" :index="item2.path">
{{ item2.label }}
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item v-else :index="item.path" :key="index + '-Suk'">{{
item.label
}}</el-menu-item>
</template>
</el-menu>
</el-aside>
tabs
<el-tabs v-model="tabsValue" type="card" closable @tab-remove="removeTab" @tab-click="tabClick">
<el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name">
</el-tab-pane>
</el-tabs>```
删除tabs
tabClick({
name
}) {
console.log(name)
if (name === this.$route.path) return
this.$router.push({
name: name,
}, () => {})
// this.$router.push(name) ,() => {}// 触发路由监听,改变对应高亮的菜单
console.log(this.$router.push(name))
},
// 删除tab
removeTab(targetPath) {
// 如果只剩一个tab时,就不能再删除了
if (this.tabs.length < 2) {
return this.$message({
type: 'warning',
message: '至少要有一个标签页!',
duration: 2000
})
}
const tabs = this.tabs
let activePath = this.tabsValue
// 在所有tab中选出删除的目标标签页的上一个或者下一个,相邻的就是下一个当前tab
tabs.forEach((tab, index) => {
if (tab.name === targetPath) {
const nextTab = tabs[index - 1] || tabs[index + 1]
// 将下一个tab高亮
activePath = nextTab.name
// 删除掉要删除的目标tab
this.tabs.splice(index, 1)
}
})
// 路由跳转到删除后的下一个tab,触发路由监听改变左边对应菜单栏的高亮
this.$router.push(activePath)
},
// 解决刷新数据丢失问题
beforeRefresh() {
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('tabsView', JSON.stringify(this.tabList))
})
let tabSession = sessionStorage.getItem('tabsView')
if (tabSession) {
let oldTabs = JSON.parse(tabSession)
if (oldTabs.length > 0) {
store.state.tabList = oldTabs
}
}
},```
监听路由变化
watch: {
// 监听路由变化
$route: {
handler(newValue) {
// tab去重处理
// 判断子组件名和路由元信息中的子组件名相同
const index = this.tabs.findIndex(
item => item.component === newValue.meta.tabInfo.component
)
// 如果tab存在,则只切换当前tab,不添加
if (index !== -1) {
this.tabsValue = this.tabs[
this.tabs.findIndex(
item => item.component === newValue.meta.tabInfo.component
)
].name
return
}
// 路由变化后将当前路由和默认高亮的菜单保持一致,避免页面刷新还是默认的值
this.defaultActive = newValue.path
// 添加tab信息到集合列表,添加一个顺序往后排一个
this.tabs.push({
label: newValue.meta.tabInfo.label,
component: newValue.meta.tabInfo.component,
name: newValue.path
})
// 每次添加后取最后一个的name显示新点击的tab
this.tabsValue = this.tabs[this.tabs.length - 1].name
},
// 页面首次加载也监听路由的值
immediate: true
}
},
定义路由
export default new VueRouter({
routes: [{
path: '/',
name: 'Home',
// components:HelloWorld
component: () => import("../views/HomeView"),
},
{
// 用户登陆路由
path: "/Home",
component: () => import("../views/HomeThree"),
children: [{
path: "/menu",
component: () => import("../views/permissions/menuManagement/menu"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
{
path: "/permissions/list",
component: () => import("../views/permissions/role/list"),
meta: {
tabInfo: {
component: 'permissions',
label: '系统角色',
path: '/permissions/list'
}
}
},
{
path: "/list",
component: () => import("../views/permissions/user/list"),
meta: {
tabInfo: {
component: 'list',
label: '系统用户',
path: '/list'
}
}
},
{
path: "/department",
component: () => import("../views/permissions/managementDepartment/department"),
meta: {
tabInfo: {
component: 'department',
label: '机构管理',
path: '/department'
}
}
},
// 添加机构测试
{
path: "/addAgency",
component: () => import("../views/permissions/user/addAgency"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
// 工作台
{
path: "/antifraudOperation/antifraudWorkbench",
component: () => import("../views/antifraudOperation/antifraudWorkbench"),
meta: {
tabInfo: {
component: 'antifraudWorkbench',
label: '反欺诈工作台',
path: '/antifraudOperation/antifraudWorkbench'
}
}
},
//闭环分析
{
path: "/antifraudOperation/closedloopAnalysis",
component: () => import("../views/antifraudOperation/closedloopAnalysis"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
//数据汇总
{
path: "/antifraudOperation/dataAggregation",
component: () => import("../views/antifraudOperation/dataAggregation"),
meta: {
tabInfo: {
component: 'dataAggregation',
label: '案件汇总查询',
path: '/antifraudOperation/dataAggregation'
}
}
},
//疑似欺诈数据库
{
path: "/antifraudOperation/suspectedFrauddatabase",
component: () => import("../views/antifraudOperation/suspectedFrauddatabase"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
//详情
{
path: "/antifraudOperation/details",
component: () => import("../views/antifraudOperation/details"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
//详情
{
path: "/antifraudOperation/details2",
component: () => import("../views/antifraudOperation/details2"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
// 反欺诈闭环数据分析
{
path: "/relationshipGraph/relationship",
component: () => import("../views/relationshipGraph/relationship"),
meta: {
tabInfo: {
component: 'menu',
label: '菜单管理',
path: '/menu'
}
}
},
// 反欺诈闭环分析
{
path: "/relationshipGraph/analysisOfthe",
component: () => import("../views/relationshipGraph/analysisOfthe"),
meta: {
tabInfo: {
component: 'analysisOfthe',
label: '反欺诈闭环数据分析',
path: '/relationshipGraph/analysisOfthe'
}
}
},
// 案件统计量
{
path: "/dataStatistics/statisticsOfcases",
component: () => import("../views/dataStatistics/statisticsOfcases"),
meta: {
tabInfo: {
component: 'statisticsOfcases',
label: '数据统计量',
path: '/dataStatistics/statisticsOfcases'
}
}
},
// 案件统计量
{
path: "/dataStatistics/addressIssues",
component: () => import("../views/dataStatistics/addressIssues"),
meta: {
tabInfo: {
component: 'addressIssues',
label: '案件处理统计',
path: '/dataStatistics/addressIssues'
}
}
},
// 基础配置
{
path: "/basicConfiguration/index",
component: () => import("../views/basicConfiguration/index"),
meta: {
tabInfo: {
component: 'basicConfigurationindex',
label: '公司配置',
path: '/basicConfiguration/index'
}
}
},
],
},
]
})
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
