访问父路由页面空白是因为未配置默认子路由，应在children中添加path: ''的子路由并redirect至首个子页面，如{path: '', redirect: 'overview'}，同时确保父组件含。

在嵌套路由中，当访问父路由（如 /dashboard）时页面空白，是因为没有匹配的子路由，也没有设置默认重定向。解决方法是在父路由的 children 中添加一个空路径子路由，并用 redirect 指向第一个子页面。

配置空路径子路由并重定向

父路由本身不渲染内容，只作为子路由容器。需在 children 数组里定义一个 path: '' 的子路由，并设置重定向目标：

• Vue Router（v4）示例：

{ path: '/dashboard', component: DashboardLayout, children: [ { path: '', redirect: 'overview' }, // 访问 /dashboard 时自动跳转 { path: 'overview', component: OverviewPage }, { path: 'users', component: UsersPage }, { path: 'settings', component: SettingsPage } ] }

• 注意：redirect 值支持字符串（相对路径）、对象（命名路由）或函数；推荐用字符串形式，简洁明确。
• 确保 DashboardLayout 组件内有 ，否则子路由无法渲染。

用命名路由提升可维护性

当子路由结构可能调整时，用命名路由重定向更稳妥，避免硬编码路径变动导致跳转失效：

• 先给目标子路由加 name：

{ path: 'overview', name: 'DashboardOverview', component: OverviewPage }

• 再在空路径路由中使用命名重定向：

{ path: '', redirect: { name: 'DashboardOverview' } }

• 这样即使 overview 路径日后改为 home，只要保持 name 不变，重定向仍有效。

避免重定向循环的检查点

如果页面卡住或反复跳转，很可能是重定向配置引发了循环：

• 确认空路径路由的 redirect 目标不是它自己（比如 redirect: '' 或指向同级空路径）
• 检查目标子路由是否确实存在且路径无拼写错误
• 若使用守卫（如 beforeEnter），确保守卫逻辑不会拦截或再次重定向
• 开发时可在控制台观察路由变化：启用 router.beforeEach 打印 to/from，快速定位跳转链

替代方案：直接在父组件中处理

如果不想依赖路由配置，也可在父布局组件的 mounted 或 setup 中手动导航：

• Vue 3 + Composition API 示例：

import { useRouter, useRoute } from 'vue-router'
export default {
setup() {
const router = useRouter()
const route = useRoute()
if (route.path === '/dashboard') {
router.replace('/dashboard/overview')
}
}
}

• 但该方式耦合了逻辑与组件，不易复用，仅建议用于简单场景或临时修复。