Vue Router 怎么处理嵌套路由的默认子路由重定向-Vue.js-PHP中文网

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

vue router 怎么处理嵌套路由的默认子路由重定向

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

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

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

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

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

vue-admin-change-reviewer

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

下载

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

示例：

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