动态添加路由

登录时进行路由注册

      //1.动态获取所有路由对象，放到数组中
      // *路由对象都在独立的文件中
      // *从文件中将所有的路由对象先读取到数组中
      const localRoutes: RouteRecordRaw[] = []
      //1.1 读取router/main所有ts文件
      const files : Record<string,any> = import.meta.glob(
        '../../router/main/**/*.ts',{
          eager:true
        }
      )
      //1.2将加载的路由对象放到localRoutes
      for(const key in files){
        const module = files[key]
        localRoutes.push(module.default)
      }
      // console.log(localRoutes)
      //2.根据菜单去匹配正确的路由
      for(const menu of userMenus){
        for(const submenu of menu.children){
          const route = localRoutes.find(item => item.path === submenu.url)
          if (route) router.addRoute('main',route)
        }
      }

map-menu.ts

import type { RouteRecordRaw } from 'vue-router'

function loadLocalRoutes() {
  //重要：动态的添加路由
  //1.动态获取所有路由对象，放到数组中
  // *路由对象都在独立的文件中
  // *从文件中将所有的路由对象先读取到数组中
  const localRoutes: RouteRecordRaw[] = []
  //1.1读取router/main所有ts文件
  const files: Record<string, any> = import.meta.glob('../router/main/**/*.ts', {
    eager: true
  })
  for (const key in files) {
    const module = files[key]
    localRoutes.push(module.default)
  }
  return localRoutes
}
export let firstMenu: any = null
export function mapMenusToRoutes(userMenus: any[]) {
  //1.加载本地路由
  const localRoutes = loadLocalRoutes()
  //2.根据菜单去匹配正确的路由
  const routes: RouteRecordRaw[] = []
  for (const menu of userMenus) {
    for (const submenu of menu.children) {
      const route = localRoutes.find((item) => item.path === submenu.url)
      if (route) {
        //1.给route的顶层菜单增加重定向功能（但只是需要添加一次即可）
        if (!routes.find((item) => item.path === menu.url)) {
          routes.push({ path: menu.url, redirect: route.path })
        }
        //二级菜单路由
        routes.push(route)
      }
      //记录第一个被匹配的菜单
      if (!firstMenu && route) firstMenu = submenu
    }
  }
  return routes
}
/**
 * @param path:需要匹配的路径
 * @param userMenus: 所有菜单
 */
export function mapPathToMeun(path: string, userMenus: any[]) {
  for (const menu of userMenus) {
    for (const submenu of menu.children) {
      if (submenu.url === path) {
        return submenu
      }
    }
  }
}
interface IBreadcrumbs {
  name: string
  path: string
}
export function mapPathToBreadCrumbs(path: string, userMenus: any[]) {
  //定义面包屑
  const breadcrumbs: IBreadcrumbs[] = []
  //遍历获取面包屑层级
  for (const menu of userMenus) {
    for (const submenu of menu.children) {
      if (submenu.url === path) {
        breadcrumbs.push({ name: menu.name, path: menu.path })
        breadcrumbs.push({ name: submenu.name, path: submenu.path })
      }
    }
  }
  return breadcrumbs
}

	   //动态的添加路由
      const routes = mapMenusToRoutes(userMenus)
      routes.forEach((route) => router.addRoute('main', route))