// 靜態(tài)路由配置（編譯時(shí)確定）
const staticRoutes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
// 動(dòng)態(tài)路由配置（運(yùn)行時(shí)確定）
const dynamicRoutes = [
  { path: '/admin', component: AdminPanel },
  { path: '/reports', component: Reports }
]

const router = createRouter({
  history: createWebHistory(),
  routes: [] // 初始為空或只有基礎(chǔ)路由
})
// 添加單個(gè)路由
router.addRoute({
  path: '/admin',
  component: AdminLayout,
  meta: { requiresAuth: true }
})
// 添加嵌套路由
router.addRoute({
  path: '/user',
  component: UserLayout,
  children: [
    { path: 'profile', component: UserProfile },
    { path: 'settings', component: UserSettings }
  ]
})
// 在指定路由下添加子路由
router.addRoute('admin', {
  path: 'users',
  component: UserManagement
})

// 通過名稱刪除路由
router.addRoute({ 
  path: '/temporary', 
  component: Temporary,
  name: 'temporary'
})
// 稍后刪除
router.removeRoute('temporary')
// 通過addRoute返回的回調(diào)刪除
const removeRoute = router.addRoute({
  path: '/temporary',
  component: Temporary
})
// 刪除路由
removeRoute()

const routes = router.getRoutes()
console.log(routes)
// 輸出所有路由配置，包括動(dòng)態(tài)添加的路由
// 遍歷路由進(jìn)行權(quán)限檢查
routes.forEach(route => {
  if (route.meta?.requiresAuth) {
    console.log(`需要認(rèn)證的路由: ${route.path}`)
  }
})

// 簡化的路由匹配原理
class Router {
  constructor(routes) {
    this.routes = []
    this.matcher = this.createMatcher(routes)
  }
  createMatcher(routes) {
    // 創(chuàng)建路由匹配器
    const matcher = {
      routes: [],
      addRoute(route, parent) {
        // 標(biāo)準(zhǔn)化路由配置
        const normalizedRoute = this.normalizeRoute(route, parent)
        this.routes.push(normalizedRoute)
        // 返回刪除函數(shù)
        return () => {
          const index = this.routes.indexOf(normalizedRoute)
          if (index > -1) {
            this.routes.splice(index, 1)
          }
        }
      },
      resolve(location) {
        // 解析當(dāng)前路徑，匹配路由
        for (const route of this.routes) {
          if (this.matchRoute(route, location)) {
            return route
          }
        }
        return null
      }
    }
    return matcher
  }
  addRoute(route) {
    return this.matcher.addRoute(route)
  }
}

// 路由樹節(jié)點(diǎn)結(jié)構(gòu)
class RouteRecord {
  constructor(options) {
    this.path = options.path
    this.component = options.component
    this.children = options.children || []
    this.parent = options.parent || null
    this.meta = options.meta || {}
  }
  addChild(childRecord) {
    childRecord.parent = this
    this.children.push(childRecord)
  }
  removeChild(childRecord) {
    const index = this.children.indexOf(childRecord)
    if (index > -1) {
      this.children.splice(index, 1)
    }
  }
}

// 用戶權(quán)限模型
class UserPermission {
  constructor(user) {
    this.user = user
    this.roles = user.roles || []
    this.permissions = user.permissions || []
  }
  // 檢查角色
  hasRole(role) {
    return this.roles.includes(role)
  }
  // 檢查權(quán)限
  hasPermission(permission) {
    return this.permissions.includes(permission)
  }
  // 檢查是否有任意權(quán)限
  hasAnyPermission(permissions) {
    return permissions.some(permission => 
      this.hasPermission(permission)
    )
  }
  // 檢查是否有所有權(quán)限
  hasAllPermissions(permissions) {
    return permissions.every(permission => 
      this.hasPermission(permission)
    )
  }
}
// 權(quán)限配置映射
const PERMISSION_MAP = {
  USER_READ: 'user:read',
  USER_WRITE: 'user:write',
  REPORT_VIEW: 'report:view',
  REPORT_EXPORT: 'report:export'
}

// 動(dòng)態(tài)路由配置管理器
class DynamicRouteManager {
  constructor(router) {
    this.router = router
    this.addedRoutes = new Set() // 記錄已添加的路由名稱
    this.routeConfigs = this.loadRouteConfigs()
  }
  // 加載路由配置
  loadRouteConfigs() {
    return {
      // 管理員路由
      admin: [
        {
          path: '/user-management',
          name: 'UserManagement',
          component: () => import('@/views/admin/UserManagement.vue'),
          meta: {
            title: '用戶管理',
            requiresAuth: true,
            permissions: [PERMISSION_MAP.USER_READ, PERMISSION_MAP.USER_WRITE]
          }
        },
        {
          path: '/system-settings',
          name: 'SystemSettings',
          component: () => import('@/views/admin/SystemSettings.vue'),
          meta: {
            title: '系統(tǒng)設(shè)置',
            requiresAuth: true,
            roles: ['admin']
          }
        }
      ],
      // 普通用戶路由
      user: [
        {
          path: '/profile',
          name: 'UserProfile',
          component: () => import('@/views/user/Profile.vue'),
          meta: {
            title: '個(gè)人資料',
            requiresAuth: true
          }
        },
        {
          path: '/dashboard',
          name: 'Dashboard',
          component: () => import('@/views/user/Dashboard.vue'),
          meta: {
            title: '工作臺(tái)',
            requiresAuth: true
          }
        }
      ],
      // 報(bào)表路由
      reports: [
        {
          path: '/reports',
          name: 'Reports',
          component: () => import('@/views/reports/Index.vue'),
          meta: {
            title: '報(bào)表中心',
            requiresAuth: true,
            permissions: [PERMISSION_MAP.REPORT_VIEW]
          },
          children: [
            {
              path: 'sales',
              name: 'SalesReport',
              component: () => import('@/views/reports/Sales.vue'),
              meta: {
                title: '銷售報(bào)表',
                permissions: [PERMISSION_MAP.REPORT_EXPORT]
              }
            }
          ]
        }
      ]
    }
  }
  // 根據(jù)權(quán)限篩選路由
  filterRoutesByPermission(userPermission) {
    const availableRoutes = []
    Object.values(this.routeConfigs).forEach(routeGroup => {
      routeGroup.forEach(route => {
        if (this.canAccessRoute(route, userPermission)) {
          availableRoutes.push(route)
        }
      })
    })
    return availableRoutes
  }
  // 檢查路由訪問權(quán)限
  canAccessRoute(route, userPermission) {
    const { meta } = route
    // 檢查角色權(quán)限
    if (meta.roles && !meta.roles.some(role => 
      userPermission.hasRole(role))
    ) {
      return false
    }
    // 檢查具體權(quán)限
    if (meta.permissions && !userPermission.hasAnyPermission(meta.permissions)) {
      return false
    }
    // 遞歸檢查子路由
    if (route.children) {
      route.children = route.children.filter(childRoute =>
        this.canAccessRoute(childRoute, userPermission)
      )
    }
    return true
  }
  // 初始化動(dòng)態(tài)路由
  async initializeRoutes(user) {
    // 清除之前添加的路由
    this.clearAddedRoutes()
    const userPermission = new UserPermission(user)
    const availableRoutes = this.filterRoutesByPermission(userPermission)
    // 添加動(dòng)態(tài)路由
    availableRoutes.forEach(route => {
      this.router.addRoute(route)
      this.addedRoutes.add(route.name)
    })
    // 確保404路由在最后
    this.ensure404Route()
    console.log(`動(dòng)態(tài)添加了 ${availableRoutes.length} 個(gè)路由`)
  }
  // 清除已添加的路由
  clearAddedRoutes() {
    this.addedRoutes.forEach(routeName => {
      this.router.removeRoute(routeName)
    })
    this.addedRoutes.clear()
  }
  // 確保404路由在最后
  ensure404Route() {
    const has404 = this.router.getRoutes().some(route => 
      route.path === '/:pathMatch(.*)*'
    )
    if (!has404) {
      this.router.addRoute({
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: () => import('@/views/NotFound.vue')
      })
    }
  }
}

// 主應(yīng)用入口集成動(dòng)態(tài)路由
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
// 創(chuàng)建路由實(shí)例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 靜態(tài)路由 - 所有人都可以訪問
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/views/Login.vue')
    }
  ]
})
// 創(chuàng)建動(dòng)態(tài)路由管理器
const routeManager = new DynamicRouteManager(router)
// 導(dǎo)航守衛(wèi) - 在路由跳轉(zhuǎn)前初始化動(dòng)態(tài)路由
router.beforeEach(async (to, from, next) => {
  // 不需要認(rèn)證的路由直接放行
  if (!to.meta?.requiresAuth) {
    next()
    return
  }
  // 檢查用戶是否已登錄
  const token = localStorage.getItem('auth_token')
  if (!token) {
    next('/login')
    return
  }
  // 獲取用戶信息
  try {
    const user = await fetchCurrentUser()
    // 初始化動(dòng)態(tài)路由
    await routeManager.initializeRoutes(user)
    // 如果當(dāng)前路由不存在，重定向到首頁
    if (to.matched.length === 0) {
      next('/')
    } else {
      next()
    }
  } catch (error) {
    console.error('初始化用戶信息失敗:', error)
    next('/login')
  }
})
const app = createApp(App)
app.use(router)
app.mount('#app')

// routes/modules/user.js - 用戶模塊路由
export const userRoutes = {
  name: 'user',
  routes: [
    {
      path: '/user',
      component: () => import('@/layouts/UserLayout.vue'),
      children: [
        {
          path: 'profile',
          name: 'UserProfile',
          component: () => import('@/views/user/Profile.vue'),
          meta: { 
            title: '個(gè)人資料',
            module: 'user'
          }
        },
        {
          path: 'settings',
          name: 'UserSettings',
          component: () => import('@/views/user/Settings.vue'),
          meta: { 
            title: '賬戶設(shè)置',
            module: 'user'
          }
        }
      ]
    }
  ]
}
// routes/modules/admin.js - 管理模塊路由
export const adminRoutes = {
  name: 'admin',
  routes: [
    {
      path: '/admin',
      component: () => import('@/layouts/AdminLayout.vue'),
      meta: { 
        requiresAuth: true,
        roles: ['admin']
      },
      children: [
        {
          path: 'dashboard',
          name: 'AdminDashboard',
          component: () => import('@/views/admin/Dashboard.vue'),
          meta: { 
            title: '管理面板',
            module: 'admin'
          }
        }
      ]
    }
  ]
}
// routes/index.js - 路由聚合
import { userRoutes } from './modules/user'
import { adminRoutes } from './modules/admin'
export const routeModules = [
  userRoutes,
  adminRoutes
]

// 模塊化路由管理器
class ModularRouteManager {
  constructor(router) {
    this.router = router
    this.modules = new Map()
    this.enabledModules = new Set()
  }
  // 注冊路由模塊
  registerModule(moduleConfig) {
    const { name, routes, enableCondition } = moduleConfig
    this.modules.set(name, {
      routes,
      enableCondition,
      enabled: false
    })
    console.log(`注冊路由模塊: ${name}`)
  }
  // 檢查模塊是否啟用
  checkModuleEnable(moduleName, context) {
    const module = this.modules.get(moduleName)
    if (!module) return false
    if (module.enableCondition) {
      return module.enableCondition(context)
    }
    return true
  }
  // 根據(jù)上下文啟用模塊
  enableModulesByContext(context) {
    this.modules.forEach((module, name) => {
      const shouldEnable = this.checkModuleEnable(name, context)
      if (shouldEnable && !module.enabled) {
        this.enableModule(name)
      } else if (!shouldEnable && module.enabled) {
        this.disableModule(name)
      }
    })
  }
  // 啟用模塊
  enableModule(moduleName) {
    const module = this.modules.get(moduleName)
    if (!module || module.enabled) return
    module.routes.forEach(route => {
      this.router.addRoute(route)
    })
    module.enabled = true
    this.enabledModules.add(moduleName)
    console.log(`啟用路由模塊: ${moduleName}`)
  }
  // 禁用模塊
  disableModule(moduleName) {
    const module = this.modules.get(moduleName)
    if (!module || !module.enabled) return
    // 移除模塊下的所有路由
    module.routes.forEach(route => {
      if (route.name) {
        this.router.removeRoute(route.name)
      }
    })
    module.enabled = false
    this.enabledModules.delete(moduleName)
    console.log(`禁用路由模塊: ${moduleName}`)
  }
  // 獲取啟用的模塊列表
  getEnabledModules() {
    return Array.from(this.enabledModules)
  }
}
// 使用示例
const modularManager = new ModularRouteManager(router)
// 注冊模塊
modularManager.registerModule({
  name: 'user',
  routes: userRoutes.routes,
  enableCondition: (user) => !!user // 所有登錄用戶都啟用
})
modularManager.registerModule({
  name: 'admin',
  routes: adminRoutes.routes,
  enableCondition: (user) => user?.role === 'admin'
})

// 功能開關(guān)管理器
class FeatureToggleManager {
  constructor() {
    this.features = new Map()
    this.listeners = new Set()
  }
  // 注冊功能開關(guān)
  registerFeature(featureName, isEnabled = false) {
    this.features.set(featureName, isEnabled)
  }
  // 啟用功能
  enableFeature(featureName) {
    this.features.set(featureName, true)
    this.notifyListeners(featureName, true)
  }
  // 禁用功能
  disableFeature(featureName) {
    this.features.set(featureName, false)
    this.notifyListeners(featureName, false)
  }
  // 檢查功能是否啟用
  isFeatureEnabled(featureName) {
    return this.features.get(featureName) || false
  }
  // 添加監(jiān)聽器
  addListener(listener) {
    this.listeners.add(listener)
  }
  // 通知監(jiān)聽器
  notifyListeners(featureName, isEnabled) {
    this.listeners.forEach(listener => {
      listener(featureName, isEnabled)
    })
  }
}
// 集成功能開關(guān)的動(dòng)態(tài)路由
class FeatureAwareRouteManager {
  constructor(router, featureManager) {
    this.router = router
    this.featureManager = featureManager
    this.featureRoutes = new Map() // featureName -> routes
    // 監(jiān)聽功能開關(guān)變化
    this.featureManager.addListener(this.onFeatureToggle.bind(this))
  }
  // 注冊功能相關(guān)路由
  registerFeatureRoutes(featureName, routes) {
    this.featureRoutes.set(featureName, routes)
    // 如果功能已啟用，立即添加路由
    if (this.featureManager.isFeatureEnabled(featureName)) {
      this.enableFeatureRoutes(featureName)
    }
  }
  // 啟用功能路由
  enableFeatureRoutes(featureName) {
    const routes = this.featureRoutes.get(featureName)
    if (!routes) return
    routes.forEach(route => {
      this.router.addRoute(route)
    })
    console.log(`啟用功能路由: ${featureName}`)
  }
  // 禁用功能路由
  disableFeatureRoutes(featureName) {
    const routes = this.featureRoutes.get(featureName)
    if (!routes) return
    routes.forEach(route => {
      if (route.name) {
        this.router.removeRoute(route.name)
      }
    })
    console.log(`禁用功能路由: ${featureName}`)
  }
  // 功能開關(guān)變化回調(diào)
  onFeatureToggle(featureName, isEnabled) {
    if (isEnabled) {
      this.enableFeatureRoutes(featureName)
    } else {
      this.disableFeatureRoutes(featureName)
    }
  }
}

// 路由狀態(tài)持久化管理
class RouteStateManager {
  constructor() {
    this.storageKey = 'vue_dynamic_routes'
  }
  // 保存路由狀態(tài)
  saveRouteState(userId, routeConfig) {
    const state = {
      userId,
      routeConfig,
      timestamp: Date.now()
    }
    const existingState = this.loadAllRouteState()
    existingState[userId] = state
    localStorage.setItem(this.storageKey, JSON.stringify(existingState))
  }
  // 加載路由狀態(tài)
  loadRouteState(userId) {
    const allState = this.loadAllRouteState()
    const userState = allState[userId]
    // 檢查是否過期（24小時(shí)）
    if (userState && Date.now() - userState.timestamp < 24 * 60 * 60 * 1000) {
      return userState.routeConfig
    }
    return null
  }
  // 加載所有狀態(tài)
  loadAllRouteState() {
    try {
      return JSON.parse(localStorage.getItem(this.storageKey)) || {}
    } catch {
      return {}
    }
  }
  // 清除用戶狀態(tài)
  clearUserState(userId) {
    const allState = this.loadAllRouteState()
    delete allState[userId]
    localStorage.setItem(this.storageKey, JSON.stringify(allState))
  }
}
// 帶緩存的路由管理器
class CachedRouteManager extends DynamicRouteManager {
  constructor(router, stateManager) {
    super(router)
    this.stateManager = stateManager
  }
  async initializeRoutes(user) {
    const userId = user.id
    // 嘗試從緩存加載
    const cachedRoutes = this.stateManager.loadRouteState(userId)
    if (cachedRoutes) {
      console.log('使用緩存的路由配置')
      this.applyCachedRoutes(cachedRoutes)
    } else {
      console.log('重新生成路由配置')
      await super.initializeRoutes(user)
      // 緩存路由配置
      const currentRoutes = this.getCurrentRouteConfig()
      this.stateManager.saveRouteState(userId, currentRoutes)
    }
  }
  // 應(yīng)用緩存的路由
  applyCachedRoutes(cachedRoutes) {
    this.clearAddedRoutes()
    cachedRoutes.forEach(route => {
      this.router.addRoute(route)
      this.addedRoutes.add(route.name)
    })
  }
  // 獲取當(dāng)前路由配置
  getCurrentRouteConfig() {
    return this.router.getRoutes().filter(route => 
      route.name && this.addedRoutes.has(route.name)
    )
  }
}

// 路由調(diào)試助手
class RouteDebugHelper {
  constructor(router) {
    this.router = router
    this.enabled = process.env.NODE_ENV === 'development'
  }
  // 打印當(dāng)前路由樹
  printRouteTree() {
    if (!this.enabled) return
    const routes = this.router.getRoutes()
    console.group('?? 當(dāng)前路由樹')
    routes.forEach(route => {
      this.printRouteNode(route, 0)
    })
    console.groupEnd()
  }
  // 打印路由節(jié)點(diǎn)
  printRouteNode(route, depth = 0) {
    const indent = '  '.repeat(depth)
    const hasChildren = route.children && route.children.length > 0
    const icon = hasChildren ? '??' : '??'
    console.log(`${indent}${icon} ${route.path} ${route.name ? `(${route.name})` : ''}`)
    if (hasChildren) {
      route.children.forEach(child => {
        this.printRouteNode(child, depth + 1)
      })
    }
  }
  // 監(jiān)控路由變化
  watchRouteChanges() {
    if (!this.enabled) return
    const originalAddRoute = this.router.addRoute.bind(this.router)
    const originalRemoveRoute = this.router.removeRoute.bind(this.router)
    // 重寫addRoute以監(jiān)控
    this.router.addRoute = (...args) => {
      console.log('? 添加路由:', args[0].name || args[0].path)
      const result = originalAddRoute(...args)
      this.printRouteTree()
      return result
    }
    // 重寫removeRoute以監(jiān)控
    this.router.removeRoute = (...args) => {
      console.log('? 刪除路由:', args[0])
      const result = originalRemoveRoute(...args)
      this.printRouteTree()
      return result
    }
  }
}
// 在開發(fā)環(huán)境中使用
if (process.env.NODE_ENV === 'development') {
  const debugHelper = new RouteDebugHelper(router)
  debugHelper.watchRouteChanges()
}

// 錯(cuò)誤示例：可能重復(fù)添加相同路由
router.addRoute({ path: '/admin', component: Admin })
router.addRoute({ path: '/admin', component: Admin })
// 解決方案：使用路由名稱并檢查是否已存在
function safeAddRoute(route) {
  if (route.name && router.hasRoute(route.name)) {
    console.warn(`路由 ${route.name} 已存在，跳過添加`)
    return
  }
  router.addRoute(route)
}

// 動(dòng)態(tài)路由可能和靜態(tài)路由沖突
const staticRoutes = [
  { path: '/user', component: UserLayout }
]
// 動(dòng)態(tài)添加可能沖突的路由
router.addRoute({ path: '/user/:id', component: UserDetail })
// 解決方案：調(diào)整路由順序或使用更具體的路徑
router.addRoute({
  path: '/user/detail/:id', // 使用更具體的路徑
  component: UserDetail
})

// 導(dǎo)航守衛(wèi)中處理未加載的路由
router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    // 路由未匹配，可能是動(dòng)態(tài)路由還未加載
    // 方案1：重試導(dǎo)航
    setTimeout(() => {
      next(to.fullPath)
    }, 100)
    // 方案2：顯示加載頁面
    // next('/loading')
    // 方案3：跳轉(zhuǎn)到404
    // next('/404')
    return
  }
  next()
})

// 路由組件的懶加載策略
const routeComponents = {
  // 基礎(chǔ)組件
  Home: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
  Login: () => import(/* webpackChunkName: "auth" */ '@/views/Login.vue'),
  // 按模塊分組
  UserProfile: () => import(/* webpackChunkName: "user" */ '@/views/user/Profile.vue'),
  UserSettings: () => import(/* webpackChunkName: "user" */ '@/views/user/Settings.vue'),
  // 管理員模塊
  AdminDashboard: () => import(/* webpackChunkName: "admin" */ '@/views/admin/Dashboard.vue'),
  UserManagement: () => import(/* webpackChunkName: "admin" */ '@/views/admin/UserManagement.vue')
}
// 預(yù)加載策略
class RoutePreloadStrategy {
  constructor(router) {
    this.router = router
    this.preloaded = new Set()
  }
  // 預(yù)加載可能訪問的路由
  preloadLikelyRoutes(user) {
    const likelyRoutes = this.getLikelyRoutes(user)
    likelyRoutes.forEach(route => {
      if (route.component && typeof route.component === 'function') {
        route.component()
        this.preloaded.add(route.name)
      }
    })
  }
  // 根據(jù)用戶行為預(yù)測可能訪問的路由
  getLikelyRoutes(user) {
    const routes = this.router.getRoutes()
    const likely = []
    // 基于用戶角色預(yù)測
    if (user.role === 'admin') {
      likely.push(...routes.filter(route => 
        route.meta?.roles?.includes('admin')
      ))
    }
    // 基于最近訪問預(yù)測
    const recentAccess = this.getRecentAccess()
    likely.push(...routes.filter(route =>
      recentAccess.includes(route.name)
    ))
    return likely
  }
  getRecentAccess() {
    // 從localStorage或狀態(tài)管理獲取最近訪問記錄
    try {
      return JSON.parse(localStorage.getItem('recent_routes')) || []
    } catch {
      return []
    }
  }
}

// 路由內(nèi)存管理
class RouteMemoryManager {
  constructor(router) {
    this.router = router
    this.routeUsage = new Map() // routeName -> usageCount
    this.maxUnusedRoutes = 20 // 最大保留未使用路由數(shù)
  }
  // 記錄路由使用
  recordRouteUsage(routeName) {
    const count = this.routeUsage.get(routeName) || 0
    this.routeUsage.set(routeName, count + 1)
  }
  // 清理不常用的路由
  cleanupUnusedRoutes() {
    const routes = this.router.getRoutes()
    const usageArray = Array.from(this.routeUsage.entries())
    // 按使用次數(shù)排序
    usageArray.sort((a, b) => a[1] - b[1])
    // 移除使用次數(shù)最少的路由
    const toRemove = usageArray.slice(0, 
      Math.max(0, usageArray.length - this.maxUnusedRoutes)
    )
    toRemove.forEach(([routeName]) => {
      if (this.router.hasRoute(routeName)) {
        this.router.removeRoute(routeName)
        this.routeUsage.delete(routeName)
        console.log(`清理未使用路由: ${routeName}`)
      }
    })
  }
  // 定期清理
  startCleanupInterval(interval = 5 * 60 * 1000) { // 5分鐘
    setInterval(() => {
      this.cleanupUnusedRoutes()
    }, interval)
  }
}

// 原理示例
class RouterMatcher {
  constructor() {
    this.routes = []
  }
  addRoute(route) {
    // 標(biāo)準(zhǔn)化路由配置
    const normalized = normalizeRoute(route)
    this.routes.push(normalized)
    // 返回刪除函數(shù)
    return () => {
      const index = this.routes.indexOf(normalized)
      if (index > -1) {
        this.routes.splice(index, 1)
      }
    }
  }
  match(location) {
    // 匹配當(dāng)前路徑對應(yīng)的路由
    return this.routes.find(route => 
      matchRoute(route, location)
    )
  }
}

// 完整的角色路由系統(tǒng)
class RoleBasedRouteSystem {
  constructor(router) {
    this.router = router
    this.roleRoutes = new Map()
  }
  // 定義角色路由
  defineRoleRoutes(role, routes) {
    this.roleRoutes.set(role, routes)
  }
  // 根據(jù)用戶角色應(yīng)用路由
  applyUserRoutes(user) {
    // 清除現(xiàn)有動(dòng)態(tài)路由
    this.clearDynamicRoutes()
    // 獲取用戶角色對應(yīng)的路由
    const userRoutes = this.roleRoutes.get(user.role) || []
    // 添加路由
    userRoutes.forEach(route => {
      this.router.addRoute(route)
    })
    // 更新當(dāng)前路由匹配
    this.router.replace(this.router.currentRoute.value)
  }
  // 清除動(dòng)態(tài)路由
  clearDynamicRoutes() {
    const routes = this.router.getRoutes()
    routes.forEach(route => {
      if (route.meta?.dynamic) {
        this.router.removeRoute(route.name)
      }
    })
  }
}

// 微前端路由協(xié)調(diào)器
class MicroFrontendRouter {
  constructor() {
    this.apps = new Map()
    this.currentApp = null
  }
  // 注冊微應(yīng)用
  registerApp(appName, routePrefix, appRouter) {
    this.apps.set(appName, {
      routePrefix,
      router: appRouter
    })
  }
  // 路由協(xié)調(diào)
  coordinateNavigation(path) {
    // 查找匹配的微應(yīng)用
    for (const [appName, app] of this.apps) {
      if (path.startsWith(app.routePrefix)) {
        if (this.currentApp !== appName) {
          // 切換微應(yīng)用
          this.switchToApp(appName, path)
        }
        return true
      }
    }
    return false
  }
  // 切換到指定微應(yīng)用
  switchToApp(appName, path) {
    const app = this.apps.get(appName)
    if (!app) return
    // 卸載當(dāng)前應(yīng)用
    if (this.currentApp) {
      this.unmountApp(this.currentApp)
    }
    // 掛載新應(yīng)用
    app.router.push(path.replace(app.routePrefix, ''))
    this.currentApp = appName
  }
}