## 路由异步加载 ### 路由加载 - /src/router/index.ts ```ts import { useAuthStore } from '@/store/auth' import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' const routes: Array = [ { path: '/', name: 'dashboard', component: () => import('@/views/dashboard/index.vue'), meta: { title: '概览' } }, { path: '/401', component: () => import('@/views/error/401.vue'), meta: { hidden: true } } ] const router = createRouter({ history: createWebHistory(), routes: routes }) router.beforeEach(async (to, from, next) => { const authStore = useAuthStore() // 判断是否加载过菜单列表 if (authStore.menuLoaded) { // 如果路径未匹配 if (to.matched.length === 0) { from.name ? next({ name: from.name }) : next('/401') } else { next() } return } try { // TODO 调用远程加载接口 let asyncMenuList = useAuthStore().menuList let asyncRoutes = generateRoute(asyncMenuList) asyncRoutes.forEach((route: any) => { if (!router.hasRoute(route.name)) { router.addRoute(route) } }) authStore.menuLoaded = true next({ ...to, replace: true }) } catch (error) { authStore.$reset() next(`/`) } }) const generateRoute = (menuList: any) => { let modules = import.meta.glob('../views/**/*.vue') const res: RouteRecordRaw[] = [] menuList.forEach((menu: any) => { const route = { ...menu } as any route.component = modules[`../views/${menu.component}.vue`] if (menu.children) { route.children = generateRoute(menu.children) } res.push(route) }) return res } export default router ``` ### 菜单持久化 - /src/store/auth.ts ```ts import { defineStore } from 'pinia' export const useAuthStore = defineStore('auth', { state: () => { return { loading: true, user: { name: '' }, token: '', menuLoaded: false, menuList: [ { path: '/', name: 'dashboard', component: 'dashboard/index', meta: { title: '概览' } }, { path: '/blog', name: 'blog', redirect: '/blog/article', meta: { title: '博客管理' }, children: [ { path: 'article', name: 'blog-article', component: 'blog/article/index', meta: { title: '文章管理' } }, { path: 'tag', name: 'blog-tag', component: 'blog/tag/index', meta: { title: '标签管理' } }, { path: 'comment', name: 'blog-comment', component: 'blog/comment/index', meta: { title: '评论管理' } }, { path: 'series', name: 'blog-series', component: 'blog/series/index', meta: { title: '系列管理' } } ] }, { path: '/sys', name: 'sys', redirect: '/sys/user', meta: { title: '系统管理' }, children: [ { path: 'user', name: 'sys-user', component: 'sys/user/index', meta: { title: '管理员列表' } }, { path: 'role', name: 'sys-role', component: 'sys/role/index', meta: { title: '角色列表' } }, { path: 'menu', name: 'sys-menu', component: 'sys/menu/index', meta: { title: '菜单管理' } } ] } ] } }, persist: [ { paths: ['user', 'token'], storage: sessionStorage } ] }) ``` ### 左侧菜单渲染 - /src/components/AppLayout/Sidebar/index.vue ```vue ```