动态增删路由

除了在创建路由器时静态定义路由，vitarx-router 还支持在运行时动态添加和移除路由，适用于权限控制、按需加载模块等场景。

router.addRoute()

addRoute 方法用于在运行时添加路由：

添加顶级路由

router.addRoute({
  path: '/new-page',
  name: 'new-page',
  component: NewPage
})

添加子路由

通过第二个参数指定父路由，新路由将作为父路由的子路由添加：

router.addRoute(
  {
    path: 'profile',
    name: 'user-profile',
    component: UserProfile
  },
  'user' // 父路由的 name 或 path
)

父路由必须存在，否则会抛出错误。建议在添加子路由前使用 hasRoute 检查父路由是否存在。

router.removeRoute()

removeRoute 方法用于移除指定路由，通过路由的 name 或 path 定位：

// 通过 name 移除
router.removeRoute('user-profile')

// 通过 path 移除
router.removeRoute('/user/profile')

removeRoute 返回布尔值，表示是否成功移除：

const removed = router.removeRoute('non-existent')
console.log(removed) // false

removeRoute 只删除指定的单条路由记录，不会级联删除子路由。如果需要移除整个路由树，需要逐个移除子路由。

router.hasRoute()

hasRoute 方法用于检查路由是否已注册：

if (router.hasRoute('admin')) {
  router.addRoute({ path: 'dashboard', component: Dashboard }, 'admin')
}

完整示例

以下示例展示了基于权限动态添加路由的常见模式：

import { createRouter } from 'vitarx-router'
import { lazy } from 'vitarx'

// 基础路由 — 所有用户可访问
const router = createRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    { path: '/403', component: Forbidden }
  ]
})

// 管理后台路由 — 仅管理员可访问
const adminRoutes = [
  {
    path: '/admin',
    name: 'admin',
    component: lazy(() => import('./pages/admin/Layout.tsx')),
    children: [
      {
        path: '/admin',
        name: 'admin-index',
        component: lazy(() => import('./pages/admin/Index.tsx'))
      },
      {
        path: '/admin/users',
        name: 'admin-users',
        component: lazy(() => import('./pages/admin/Users.tsx'))
      },
      {
        path: '/admin/posts',
        name: 'admin-posts',
        component: lazy(() => import('./pages/admin/Posts.tsx'))
      }
    ]
  }
]

/**
 * 根据用户权限添加路由
 * @param isAdmin - 是否为管理员
 */
function setupRoutesByPermission(isAdmin: boolean): void {
  if (isAdmin && !router.hasRoute('admin')) {
    for (const route of adminRoutes) {
      router.addRoute(route)
    }
  } else if (!isAdmin && router.hasRoute('admin')) {
    router.removeRoute('admin-posts')
    router.removeRoute('admin-users')
    router.removeRoute('admin-index')
    router.removeRoute('admin')
  }
}

// 用户登录后根据权限设置路由
async function onUserLogin() {
  const user = await fetchCurrentUser()
  setupRoutesByPermission(user.isAdmin)
}