因为项目中的需求菜单的生成由后端返回的个人信息进行配置，所以就使用了动态路由这个方法去实现项目菜单的动态加载，这一功能的完成主要涉及两个方面
一：动态路由的生成
这一部分我主要是在全局路由守卫中完成的，因为路由信息是后端返回的，所以使用async await,在获取菜单之后对路由对象进行封装，为了避免顶层使用await,我选择在路由全局守卫中进行对路由的封装和添加
router/index.jsimport {createRouter, createWebHistory} from 'vue-router';import routes from "./router";import { useMainStore } from '../store';import { commonApi } from '../API';const router = createRouter({history: createWebHistory(),routes: routes});router.beforeEach(async(to, from, next) => {const store = useMainStore()if(to.fullPath!==""&&to.fullPath!=="/"){//记录当前路由store.selectedMenu = to.fullPath;}if(routes.length===1){if(store.menuList.length===0){//页面刷新时重新获取用户信息，保存菜单await store.getUserInfo()store.isRefreshMenu =true;}//封装动态路由对象let route = {path:"/",name:'home',redirect:store.menuList[0].menuUrl,component:()=>import(/* @vite-ignore */"../views/main.vue"),// component:defineAsyncComponent(()=>import(/* @vite-ignore */'../views/main')),children:[]}//加载组件形成映射对象let modules = import.meta.glob('../views/*/*.vue')store.menuList.forEach((element,index1)=>{route.children.push({path:element.menuUrl,name:element.menuName,redirect:element.children[0].menuUrl,// component:()=>import(/* @vite-ignore */`../views${element.menuUrl}/index.vue`),component:modules["../views"+element.menuUrl+"/index.vue"],// component:defineAsyncComponent(()=>import(/* @vite-ignore */`../views${element.menuUrl}/index`)),children:[]})if(element.children.length>0){route.children[index1].redirect = element.children[0].menuUrl;route.children[index1].children=(element.children.reduce((value,item,index)=>{value.push({path:item.menuUrl,// path:item.menuUrl,name:item.menuUrl,component:modules["../views"+item.menuUrl+".vue"],// component:()=>import(/* @vite-ignore */`../views${item.menuUrl}.vue`),// component:defineAsyncComponent(()=>import(/* @vite-ignore */`../views${item.menuUrl}`)),meta:{title:item.menuName,icon:"el-icon-house"}})return value;},[]))}})//添加动态路由router.addRoute(route)router.options.routes.push(route);//重新执行路由守卫函数next({...to,replace:true})}else{next();}});export default router;
二：刷新之后路由和菜单的保持
我将菜单数组以及是否刷新的标识保存在store中了
main.js //菜单保持，下面逻辑大家根据自己项目进行更改watchEffect(()=>{//用户刷新页面时保存选择的菜单样式，且只刷新时执行一次if(store.selectedMenu!==""&&store.isRefreshMenu){const splitArray = store.selectedMenu.split("/");const path = '/'+splitArray[1];const childPath = path+"/"+splitArray[2];if(routes[1].children.length>0){const menuKey = routes[1].children.findIndex((element)=>{return element.path === path;})selectedMenu.value = [menuKey]if(routes[1].children[menuKey].children.length>0){const childMenuKey = routes[1].children[menuKey].children.findIndex((element)=>{return element.path === childPath;})nextTick(()=>{leftMenuList.value = routes[1].children[menuKey].children;})selectedLeftKeys.value = [childMenuKey]}}store.isRefreshMenu = false;}})
大家根据自己的router/route.js文件的内容以及自己项目中菜单的逻辑进行灵活变化。这里只是提供动态路由设置的核心代码以及相关核心思路。
如果觉得《vue3+vite2实现动态路由并且动态加载组件 避坑上线成功》对你有帮助，请点赞、收藏，并留下你的观点哦！
