vue3 + vite 实现一个动态路由加载功能

假设后端返回的格式是这样子

{"menu": [{"path": "/admin","name": "adminLayout","redirect": "/admin/index","componentPath": "/layout/admin/index.vue","children": [{"path": "index","name": "Index","meta": {"title": "首页","keepAlive": true,"requireAuth": true},"componentPath": "/views/index/index.vue"},{"path": "logic-flow","name": "LogicFlow","meta": {"title": "可视化拖拽","keepAlive": true,"requireAuth": true},"componentPath": "/views/logic-flow/index.vue"},{"path": "custom-form","name": "CustomForm","meta": {"title": "自定义表单","keepAlive": true,"requireAuth": true},"componentPath": "/views/custom-form/index.vue"},{"path": "big-screen","name": "BigScreen","meta": {"title": "可视化大屏","keepAlive": true,"requireAuth": true},"componentPath": "/views/big-screen/index.vue"},{"path": "d3","name": "D3","meta": {"title": "D3","keepAlive": true,"requireAuth": true},"componentPath": "/views/d3/index.vue"},{"path": "konva","name": "Konva","meta": {"title": "Konva","keepAlive": true,"requireAuth": true},"componentPath": "/views/konva/index.vue"},{"path": "/function","name": "Function","redirect": "/function/index","children": [{"path": "large-file-upload","name": "LargeFileUpload","meta": {"title": "LargeFileUpload","keepAlive": true,"requireAuth": true},"componentPath": "/views/function/large-file-upload/index.vue"},{"path": "virtual-list","name": "VirtualList","meta": {"title": "VirtualList","keepAlive": true,"requireAuth": true},"componentPath": "/views/function/virtual-list/index.vue"}]}]},{"path": "/data-chart","name": "DataChart","meta": {},"componentPath": "/views/big-screen/data-chart.vue"}]
}

在vite里主要使用到的方法是import.meta.glob，它能通过我们提供的路径动态引入相关的组件，如果我们传入了../views/**/**.vue，它返回的相关格式是这样子，这样的话就可以用过路径获取相关异步导入组件的函数了

完整代码如下（permission.ts）：

import router from './index'
import { RouteRecordRaw } from 'vue-router'
import { useUserStore } from '@/store/modules/user'const viewsModules = import.meta.glob('../views/**/**.vue')
const layoutModules = import.meta.glob('../layout/*/*.vue')// 这个方法主要就是将componentPath转成异步引入函数component
const menuToRoutes = (menus: RouteRecordRaw[]) => {if (!menus || !menus.length) {return []}const routes: RouteRecordRaw[] = []menus.forEach((item: any) => {const meta = Object.assign({}, item.meta)let componentif (item.componentPath) {// 如果找不到就给个404的组件component =viewsModules[`..${item.componentPath}`] ||layoutModules[`..${item.componentPath}`] ||viewsModules['../views/404/index.vue']}routes.push({meta,name: item.path,path: item.path,component: component,redirect: item.redirect,children: menuToRoutes(item.children),})})return routes
}export const setupPermission = () => {router.beforeEach((to, from, next) => {const userStore = useUserStore()if (!userStore.menu.length) {// 获取路由// userStore.menu就是json里的menu字段userStore.setMenu().then(() => {// 动态路由注册router.addRoute({path: '/',redirect: '/admin',children: menuToRoutes(userStore.menu),})next({ ...to, replace: true })}).catch(() => {next()})} else {next()}})
}

最后在main.js里调用一下setupPermission方法就行~

PS: 如果退出登录需要清除动态路由的话，因为现在vue-router没有提供可以直接清空的方法，所以可以考虑返回登录页后刷新一下界面来解决~