1.在默认路由router文件下新增两个额外的文件page：存放额外的路由列表，注意这里需要引入有router-view视图的页面，这里我是采用let Main = () => import("@v/layout/Main.vue");代码：
在page中使用：
2.dynamicAddRouter处理不匹配的路由和注册page路由表到router中
3.面包屑组件：
3.状态管理代码：
import router from '@/router'
import { ClassTag } from '#/index'
import { defineStore } from 'pinia'
import { inject } from 'vue'
import type { RouteLocationNormalizedLoaded } from 'vue-router'
export const useTagStores = defineStore('Tag', {
state: () => ({
tagList: [new ClassTag("/accountmanage/accountlist", "商户列表", "home")],//路由列表
reload :inject("reload") as any
}),
actions: {
// 添加
pushTag(route: RouteLocationNormalizedLoaded, index: number = -1) {
const { fullPath, meta, name } = route
// 如果当前路由是redirect，则返回不添加标签页
if ("redirect" === name) {
return;
}
let openTags = this.tagList
let findIndex = openTags.find((item: ClassTag) => item.fullPath == fullPath)
if (!findIndex) {
var i = index > -1 ? index : openTags.length
openTags.splice(i, 0, new ClassTag(fullPath, meta.title as string, name as string))
}
},
// 妙处，清空列表在添加避免将其他模块的路由增加进去
settagList(route: RouteLocationNormalizedLoaded) {
const { fullPath, meta, name } = route
let openTags = this.tagList
openTags.splice(0)
openTags.splice(1, 1, new ClassTag(fullPath, meta.title as string, name as string))
},
// 点击跳转
headerTab(index: number) {
let tag = this.tagList[index]
let route = router.currentRoute.value
if (tag.fullPath != route.fullPath) {
router.push(tag.fullPath);
}
},
/**
* 右键菜单功能
*/
Command({ code, fullPath }: { code: number, fullPath: string }) {
let openTags = this.tagList
let route = router.currentRoute.value
//点击标签页索引
let index = openTags.findIndex((item) => item.fullPath == fullPath);
//当前激活状态的标签页索引
let activeIndex = openTags.findIndex((item) => item.fullPath === route.fullPath);
switch (code) {
case 1:
this.reload();
break;
case 2://关闭左侧所有标签页
openTags.splice(0, index);
if (activeIndex != index||activeIndex <= index) {
router.push(openTags[0]?.fullPath);
}
break;
case 3://关闭右侧所有标签页
// 删除右侧所有标签页
openTags.splice(index + 1);
// 如果当前页面被删除，显示右击菜单页
if (activeIndex > index) {
router.push(openTags[index].fullPath);
}
break;
case 4:
this.removePath(fullPath)
break;
case 5: //关闭所有标签页
openTags.splice(1);
router.push(openTags[0].fullPath);
break;
}
},
// 删除
removePath(fullPath: string) {
let openTags = this.tagList
let index = openTags.findIndex(item => item.fullPath === fullPath)
if (-1 != index) {
this.removeTab(index)
}
},
removeTab(index: number) {
let openTags = this.tagList
let tag = openTags[index]
// 获取当前路由信息
let route = router.currentRoute.value
// 如果当前路由的 fullPath 等于 tag 的 fullPath，则说明需要进行路由跳转
if (route.fullPath == tag.fullPath) {
// openTags[index + 1] || openTags[index - 1] 判断跳转到哪个路由（下一个或上一个），并将该路由的全路径赋值给 fullPath 变量
let { fullPath } = openTags[index + 1] || openTags[index - 1];
router.push(fullPath);
}
// 在 openTags 中删除指定下标的元素
openTags.splice(index, 1)
},
},
persist: true//开启持久化
})