工作记录根据菜单列表生成路由数据

// 根据菜单列表，生成路由数据

json

{
"code": 0,
"msg": "success",
"data": [
{
"id": 1,
"name": "系统管理",
"url": null,
"openStyle": 0,
"icon": "icon-setting",
"children": [
{
"id": 11,
"name": "菜单管理",
"url": "menu/index",
"openStyle": 0,
"icon": "icon-menu"
},
{
"id": 12,
"name": "用户管理",
"url": "user/index",
"openStyle": 0,
"icon": "icon-user"
},
{
"id": 13,
"name": "机构管理",
"url": "org/index",
"openStyle": 0,
"icon": "icon-cluster"
},
{
"id": 14,
"name": "角色管理",
"url": "role/index",
"openStyle": 0,
"icon": "icon-team"
},
{
"id": 15,
"name": "岗位管理",
"url": "post/index",
"openStyle": 0,
"icon": "icon-addteam"
}
]
},
{
"id": 3,
"name": "图表",
"url": null,
"openStyle": 0,
"icon": "icon-barchart",
"children": [
{
"id": 31,
"name": "堆叠面积图",
"url": "charts/AreaStack",
"openStyle": 0,
"icon": "icon-unorderedlist"
},
{
"id": 32,
"name": "虚线柱状图",
"url": "charts/CategoryStack",
"openStyle": 0,
"icon": "icon-unorderedlist"
},
{
"id": 33,
"name": "上证指数图",
"url": "charts/Candlestick",
"openStyle": 0,
"icon": "icon-unorderedlist"
}
]
},
{
"id": 4,
"name": "编辑器",
"url": null,
"openStyle": 0,
"icon": "icon-edit",
"children": [
{
"id": 41,
"name": "富文本编辑器",
"url": "editor/WangEditor",
"openStyle": 0,
"icon": "icon-unorderedlist"
},
{
"id": 42,
"name": "Markdown编辑器",
"url": "editor/MdEditor",
"openStyle": 0,
"icon": "icon-unorderedlist"
}
]
},
{
"id": 5,
"name": "界面",
"url": null,
"openStyle": 0,
"icon": "icon-windows",
"children": [
{
"id": 51,
"name": "Icon 图标",
"url": "icons/index",
"openStyle": 0,
"icon": "icon-unorderedlist"
},
{
"id": 52,
"name": "二维码生成",
"url": "qrcode/index",
"openStyle": 0,
"icon": "icon-unorderedlist"
},
{
"id": 53,
"name": "页面打印",
"url": "printJs/index",
"openStyle": 0,
"icon": "icon-unorderedlist"
},
{
"id": 54,
"name": "图片裁剪",
"url": "cropper/index",
"openStyle": 0,
"icon": "icon-unorderedlist"
},
{
"id": 55,
"name": "复制文本",
"url": "copy/index",
"openStyle": 0,
"icon": "icon-unorderedlist"
}
]
},
{
"id": 10,
"name": "多级菜单",
"url": null,
"openStyle": 0,
"icon": "icon-unorderedlist",
"children": [
{
"id": 101,
"name": "菜单1",
"url": null,
"openStyle": 0,
"icon": "icon-unorderedlist",
"children": [
{
"id": 1011,
"name": "菜单11",
"url": "menu/menu1/menu11/index",
"openStyle": 0,
"icon": "icon-unorderedlist"
},
{
"id": 1012,
"name": "菜单13",
"url": null,
"openStyle": 0,
"icon": "icon-unorderedlist",
"children": [
{
"id": 10121,
"name": "菜单121",
"url": "menu/menu1/menu12/menu121/index",
"openStyle": 0,
"icon": "icon-unorderedlist"
},
{
"id": 10122,
"name": "菜单122",
"url": "menu/menu1/menu12/menu122/index",
"openStyle": 0,
"icon": "icon-unorderedlist"
}
]
},
{
"id": 1013,
"name": "菜单13",
"url": "menu/menu1/menu13/index",
"openStyle": 0,
"icon": "icon-unorderedlist"
}
]
},
{
"id": 102,
"name": "菜单2",
"url": "menu/menu2/index",
"openStyle": 0,
"icon": "icon-unorderedlist"
}
]
}
]
}

定义

// 加载vue组件

const layoutModules = import.meta.glob('/src/views/**/*.vue')

// 根据路径，动态获取vue组件

const getDynamicComponent = (path)=> {

const component = layoutModules[`/src/views/${path}.vue`]

if (!component) {

console.error('component error', path)

}

return component

}

export const generateRoutes = (menuList): => {

const routerList = []

menuList.forEach((menu: any) => {

let component

let path

if (menu.children && menu.children.length > 0) {

component = () => import('@/layout/index.vue')

path = '/p/' + menu.id

} else {

component = getDynamicComponent(menu.url)

path = '/' + menu.url

}

const route: RouteRecordRaw = {

path: path,

component: component,

children: [],

meta: {

title: menu.name,

icon: menu.icon,

id: '' + menu.id,

cache: true,

_blank: menu.openStyle === 1,

breadcrumb: []

}

// 有子菜单的情况

if (menu.children && menu.children.length > 0) {

route.children?.push(...generateRoutes(menu.children))

}

routerList.push(route)

})

return routerList

}

使用

import { defineStore } from 'pinia'

import { useMenuNavApi } from '@/api/menu'

import { generateRoutes } from '@/router'

import { RouteRecordRaw } from 'vue-router'

export const routerStore = defineStore('routerStore', {

state: () => ({

menuRoutes: [],

searchMenu: [],

routes: []

}),

actions: {

async getMenuRoutes() {

const { data } = await useMenuNavApi()

const routes = generateRoutes(data)

this.menuRoutes.push(...routes)

return this.menuRoutes

setSearchMenu(routers) {

this.searchMenu = routers

setRoutes(routers) {

this.routes = routers

}

})

页面中使用

<el-scrollbar>

<el-menu

:default-active="defaultActive"

:collapse="!store.appStore.sidebarOpened"

:unique-opened="store.appStore.theme.uniqueOpened"

background-color="transparent"

:collapse-transition="false"

mode="vertical"

router

<menu-item v-for="menu in store.routerStore.menuRoutes" :key="menu.path" :menu="menu"></menu-item>

</el-menu>

</el-scrollbar>

</template>

import store from '@/store'

import MenuItem from './MenuItem.vue'

import { useRoute } from 'vue-router'

import { computed } from 'vue'

const route = useRoute()

const defaultActive = computed(() => {

const { path } = route

return path

})

</script>

<el-sub-menu v-if="menu.children.length > 0" :key="menu.path" :index="menu.path">

<span>{{ menu.meta.title }}</span>

</template>

<menu-item v-for="sub in menu.children" :key="sub.path" :menu="sub"></menu-item>

</el-sub-menu>

<el-menu-item v-else :key="menu.path" :index="menu.path">

<template #title>{{ menu.meta.title }}</template>

</el-menu-item>

</template>

defineProps({

menu: {

type:Array,

required: true

}

})

</script>

完整路由

import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'

import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

import store from '@/store'

import { i18n } from '@/i18n'

import { pathToCamel } from '@/utils/tool'

NProgress.configure({ showSpinner: false })

const constantRoutes: RouteRecordRaw[] = [

{

path: '/redirect',

component: () => import('../layout/index.vue'),

children: [

{

path: '/redirect/:path(.*)',

component: () => import('../layout/components/Router/Redirect.vue')

}

]

{

path: '/login',

component: () => import('../views/login/login.vue')

{

path: '/404',

component: () => import('../views/404.vue')

}

]

const asyncRoutes: RouteRecordRaw = {

path: '/',

component: () => import('../layout/index.vue'),

redirect: '/home',

children: [

{

path: '/home',

component: () => import('../views/home.vue'),

meta: {

title: i18n.global.t('router.home'),

affix: true

}

{

path: '/profile/password',

component: () => import('../views/profile/password.vue'),

meta: {

title: i18n.global.t('router.profilePassword'),

cache: true

}

]

}

export const errorRoute: RouteRecordRaw = {

path: '/:pathMatch(.*)',

redirect: '/404'

}

export const router = createRouter({

history: createWebHashHistory(),

routes: constantRoutes

})

// 白名单列表

const whiteList = ['/login']

// 路由加载前

router.beforeEach(async (to, from, next) => {

NProgress.start()

// token存在的情况

if (store.userStore.token) {

if (to.path === '/login') {

next('/home')

} else {

// 用户信息不存在，则重新拉取用户等信息

if (!store.userStore.user.id) {

await store.userStore.getUserInfoAction()

const menuRoutes = await store.routerStore.getMenuRoutes()

// 根据后端菜单路由，生成KeepAlive路由

const keepAliveRoutes = getKeepAliveRoutes(menuRoutes, [])

// 添加菜单路由

asyncRoutes.children?.push(...keepAliveRoutes)

router.addRoute(asyncRoutes)

// 错误路由

router.addRoute(errorRoute)

// 保存路由数据

store.routerStore.setRoutes(constantRoutes.concat(asyncRoutes))

// 搜索菜单需要使用

store.routerStore.setSearchMenu(keepAliveRoutes)

next({ ...to, replace: true })

} else {

next()

}

} else {

// 没有token的情况下，可以进入白名单

if (whiteList.indexOf(to.path) > -1) {

next()

} else {

next('/login')

}

})

// 路由加载后

router.afterEach(() => {

NProgress.done()

})

// 获取扁平化路由，将多级路由转换成一级路由

export const getKeepAliveRoutes = (rs: RouteRecordRaw[], breadcrumb: string[]): RouteRecordRaw[] => {

const routerList: RouteRecordRaw[] = []

rs.forEach((item: any) => {

if (item.meta.title) {

breadcrumb.push(item.meta.title)

}

if (item.children && item.children.length > 0) {

routerList.push(...getKeepAliveRoutes(item.children, breadcrumb))

} else {

item.meta.breadcrumb.push(...breadcrumb)

routerList.push(item)

}

breadcrumb.pop()

})

return routerList

}

// 加载vue组件

const layoutModules = import.meta.glob('/src/views/**/*.vue')

// 根据路径，动态获取vue组件

const getDynamicComponent = (path: string): any => {

const component = layoutModules[`/src/views/${path}.vue`]

if (!component) {

console.error('component error', path)

}

return component

}

// 根据菜单列表，生成路由数据

export const generateRoutes = (menuList: any): RouteRecordRaw[] => {

const routerList: RouteRecordRaw[] = []

menuList.forEach((menu: any) => {

let component

let path

if (menu.children && menu.children.length > 0) {

component = () => import('@/layout/index.vue')

path = '/p/' + menu.id

} else {

component = getDynamicComponent(menu.url)

path = '/' + menu.url

}

const route: RouteRecordRaw = {

path: path,

component: component,

children: [],

meta: {

title: menu.name,

icon: menu.icon,

id: '' + menu.id,

cache: true,

_blank: menu.openStyle === 1,

breadcrumb: []

}

// 有子菜单的情况

if (menu.children && menu.children.length > 0) {

route.children?.push(...generateRoutes(menu.children))

}

routerList.push(route)

})

return routerList

}

多级菜单