嵌套路由默认子路由重定向本质是解决访问父路径（如/about）时展示空白的问题，通过redirect字段自动跳转至子路由（如/about/index），避免父组件无<router-view>导致的渲染失败，推荐使用命名路由重定向提升可维护性。

嵌套路由的默认子路由重定向，本质是解决“访问父路径时该展示什么内容”的问题。父路由本身通常只提供布局（比如带侧边栏的 Layout），不直接渲染业务内容；用户一进 `/about` 就看到空白或报错，体验很差。这时就需要在父路由下配置一个重定向，自动跳转到某个子路由（如 `/about/index`），让页面立刻有内容可展示。

为什么必须用重定向而不是直接配 component

如果给父路由（如 /about）同时配置 component 和 children，Vue Router 会尝试渲染父组件 + 子路由占位符，但往往父组件里没写 <router-view>，或者写了但没匹配到子路由，结果就是空白。而设为重定向后，路由系统跳过父组件渲染，直接定位到目标子路由，流程更干净、意图更明确。

标准写法：在父路由中加 redirect 字段

这是最常用也最推荐的方式，适用于大多数后台管理类项目：

• 父路由的 path 保持语义清晰（如 /about）
• 不写 component，只写 redirect 指向子路由路径或命名路由
• children 数组正常定义子路由，其中至少有一个匹配重定向目标

示例：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

立即学习“前端免费学习笔记（深入）”；

{
  path: '/about',
  name: 'About',
  redirect: '/about/index',
  component: Layout,
  children: [
    {
      path: 'index',
      name: 'AboutPage',
      component: () => import('@/views/sys/about/index.vue')
    }
  ]
}

进阶技巧：用命名路由重定向提升可维护性

当子路由路径未来可能调整（比如从 /about/index 改成 /about/home），硬编码路径容易漏改。换成命名路由重定向就安全得多：

• 重定向目标写成 { name: 'AboutPage' }
• 只要子路由的 name 不变，父路由配置就无需动
• 配合 meta.hideMenu: true 可隐藏子路由在菜单中的显示，只留父级入口

注意嵌套层级与 path 写法

子路由的 path 不能以 / 开头，否则会被视为根路径，破坏嵌套关系。正确写法是相对路径：

• ✅ path: 'index' → 完整路径为 /about/index
• ❌ path: '/index' → 实际匹配的是 /index，和父路由无关
• 重定向目标也需对应，写 redirect: '/about/index' 或 redirect: { name: 'AboutPage' }