1. 流程说明
- 监控路由,通过路由和pinia 中缓存的菜单路由信息进行查询处理
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/abaf2062cde04a5992047c0967245a5c.png)
其他处理见前边部分布局实现,包含tabs 的动态增改处理,面包屑过滤,逻辑处理整合到menu.ts中src\stores\menu.ts
import {defineStore} from 'pinia'
import {ref} from 'vue'
import { searchSelfMenusService } from '@/api/sys/menu'
import router from '@/router/index.js'
import Layout from '@/views/layout/Layout.vue'
let modules = import.meta.glob('../views/**/*.vue')
export const useMenuStore = defineStore("menu", () => {
const menuList = ref<Array<any>>([])
const routerList = ref<Array<any>>([])
const menuArray = ref<Array<any>>([])
const tabList = ref([{title:'首页',path:"/index",isClose: false, menuName: '首页'}])
const activeTab = ref('/index')
const breadList = ref([{menuName: '首页', id: 0}])
const generateRouterAndMenu = async () => {
let menuResult = await searchSelfMenusService()
routerList.value = []
initMenuAndRouter(menuResult.data, routerList.value)
menuList.value = []
contactChildRouter(menuResult.data, '')
menuList.value = menuResult.data
menuArray.value = flattenMenuTree(menuList.value)
routeCheage(activeTab.value)
}
const initMenuAndRouter = (menuList: Array<any>, routerList: Array<any>) => {
modules = import.meta.glob('../views/**/*.vue')
initRouterMountComponent(menuList, routerList)
mountRouter()
}
const initRouterMountComponent = (menuList: Array<any>, routerList: Array<any>) => {
menuList.forEach(item => {
let routerInfo: any = {}
if (item.componentPath) {
if (item.children && item.children.length > 0) {
routerInfo = {
name: item.menuName,
path: item.path,
meta: {title: item.menuName},
component: modules[`../views/${item.componentPath}.vue`],
children: []
}
} else {
routerInfo = {
name: item.menuName,
path: item.path,
meta: {title: item.menuName},
component: modules[`../views/${item.componentPath}.vue`]
}
}
routerList.push(routerInfo)
}
if (item.children && item.children.length > 0) {
initRouterMountComponent(item.children, routerInfo.children)
}
})
}
const contactChildRouter = (list: Array<any>, parentPath: string) => {
list.forEach(item => {
if (parentPath != '') {
let path = parentPath + '/' + item.path
item.path = path
} else {
let path = "/" + item.path
item.path = path
}
if (item.children && item.children.length > 0) {
contactChildRouter(item.children, item.path)
}
})
}
const mountRouter = () => {
router.addRoute(
{
component: Layout,
path: "/",
redirect: 'index',
children: routerList.value
}
)
}
const flattenMenuTree = (tree: Array<any>): any[] => {
let result: any[] = []
let traverse = (nodes: Array<any>) => {
nodes.forEach(node => {
result.push({ ...node})
if (node.children && node.children.length > 0) {
traverse(node.children);
}
})
}
traverse(tree)
return result;
}
const removeMenuRouter = () => {
menuList.value = []
routerList.value = []
menuArray.value = []
initBreadcrumbAndTabs()
}
const initBreadcrumbAndTabs = () => {
tabList.value = [{title:'首页',path:"/index",isClose: false, menuName: '首页'}]
activeTab.value = '/index'
breadList.value = [{menuName: '首页', id: 0}]
}
const addTab = (data: any) => {
const checkTab: Array<any> = tabList.value.filter(item => item.path === data.path)
if (checkTab.length === 0) {
let tab = {title: data.menuName, path: data.path, isClose: false, menuName: data.menuName}
tabList.value.push(tab)
}
}
const delTabList = (path: string) => {
let index = tabList.value.findIndex(obj => obj.path === path)
tabList.value = tabList.value.filter(item => {
if(item.path == path) {
return false
}else {
return true
}
})
if (tabList.value.length == 0) {
initBreadcrumbAndTabs()
router.push(activeTab.value)
}
if (activeTab.value == path) {
if (index > 0) {
setActiveTab(tabList.value[index -1].path)
} else {
setActiveTab(tabList.value[index].path)
}
router.push(activeTab.value)
}
}
const setActiveTab = (path: string) => {
activeTab.value = path
}
const colseOthersTabs = (path: string) => {
tabList.value = tabList.value.filter(item => item.path == path)
activeTab.value = path
routeCheage(path)
router.push(path)
}
const addBreadList = (item: any) => {
breadList.value = searchParentPath(item, menuArray.value)
}
function searchParentPath(menu: any, menuArray: any[]) {
let result = [{ menuName: menu.menuName, id: menu.id }];
function traverse(node: any) {
const currentNode = menuArray.find(n => n.id === node.parentId);
if (currentNode) {
result.unshift({ menuName: currentNode.menuName, id: currentNode.id });
traverse(currentNode);
}
}
if (menu.parentId !== 0) {
traverse(menu);
}
return result;
}
const routeCheage = (route: string) => {
const menus = menuArray.value.filter(item => item.path.includes(route))
let match = menus.sort((a, b) => a.path.length - b.path.length)
if (match.length > 0) {
addTab(match[0])
setActiveTab(route)
addBreadList(match[0])
}
}
return {
menuList, routerList, tabList, activeTab, menuArray, breadList,
generateRouterAndMenu, initMenuAndRouter, removeMenuRouter,
initBreadcrumbAndTabs, addTab, delTabList, setActiveTab,
colseOthersTabs, addBreadList, routeCheage
}
},
{
persist: {
paths: ['activeTab']
}
}
)