嵌套路由重定向的核心逻辑是父路由访问时默认跳转至其合法子路由，必须显式写全路径（如'/about/index'）并确保该子路由已声明在children中，避免相对跳转导致404。

嵌套路由重定向的核心逻辑

当父路由本身可被直接访问（比如 /about），但你希望用户进入该路径时默认看到某个子页面（如 /about/index），而不是空白或仅父组件内容，就需要配置重定向。这种重定向不是跳到一级路由，而是跳进嵌套结构内部，关键在于：重定向目标必须是合法的子路由完整路径，且不能脱离父级上下文。

正确配置嵌套路由重定向的方式

在父路由的 routes 配置中，使用 redirect 字段指向子路由的完整路径（含父前缀），同时确保该子路由已定义在 children 数组里：

• 父路由的 path 必须明确（如 /about）
• redirect 值写成带前缀的字符串，例如 '/about/index'，不能只写 'index'
• 对应子路由需在 children 中声明，path: 'index'（不加斜杠）
• 父路由自身可不设 component，但更常见的是用一个布局组件（如 LAYOUT）包裹 <router-view>

为什么不能省略父路径前缀

如果重定向写成 redirect: 'index' 或 { path: 'index' }，vue-router 会将其解析为**相对当前路径的跳转**，但嵌套路由的“当前路径”是运行时匹配结果，容易导致歧义或 404。显式写全路径（如 '/about/index'）能确保跳转稳定、可预测，也便于调试和维护。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

配合别名实现更灵活的入口

若还想让 /about 和 / 都进入同一个子页面，可结合 alias 使用：

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

• 给子路由单独配置 alias，例如 { path: 'index', alias: '', ... }，使访问 /about（无子路径）时自动渲染 index
• 或在父路由上设 alias: '/'，再配 redirect，实现根路径直达嵌套子页
• 注意：alias 不触发导航守卫，redirect 才会，所以权限控制类逻辑仍应放在 redirect 函数中