Vue嵌套路由中，子路由默认展示首页需配置path: ''的子路由并确保父组件含；也可用redirect跳转至已定义子路径，但二者均依赖父组件提供渲染出口。
在 Vue 嵌套路由中，让子路由默认展示首页内容（即访问父路径时自动加载某个子组件），关键在于配置一个 空路径（path: ''）的子路由，并确保父组件模板里有
空路径子路由：最直接的方式
当用户访问 /dashboard 时，希望默认显示 DashboardHome 组件，而不是空白或报错，就给 children 数组加一条 path: '' 的记录：
- 路径为空字符串，表示“匹配父路径的结尾”，即
/dashboard本身 - 它不会改变 URL，也不会触发重定向，语义清晰、性能轻量
- 必须配合父组件中的
示例配置：
const routes = [
{
path: '/dashboard',
component: DashboardLayout,
children: [
{ path: '', component: DashboardHome }, // ← 默认子路由
{ path: 'stats', component: StatsView },
{ path: 'users', component: UsersView }
]
}
]
用 redirect 实现跳转式默认（可选）
如果更倾向“访问 /dashboard 时强制跳转到 /dashboard/home”，可用 redirect：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 适合需要明确 URL、便于书签或 SEO 的场景
- 注意 redirect 后的路径需是已定义的子路由路径（如
'home'或'/dashboard/home'） - 若使用命名路由，推荐写
{ name: 'DashboardHome' }更健壮
示例：
{
path: '/dashboard',
component: DashboardLayout,
children: [
{ path: '', redirect: 'home' }, // 跳转到同级的 'home' 子路由
{ path: 'home', name: 'DashboardHome', component: DashboardHome },
{ path: 'settings', component: SettingsView }
]
}
父组件必须包含
空路径或 redirect 都依赖父组件主动提供渲染出口。例如 DashboardLayout.vue 中必须有：
<template><div class="dashboard">
<header><h2>控制台</h2></header><main><router-view></router-view><!-- ✅ 子路由组件将在这里插入 --></main>
</div>
</template>
没有这行，任何子路由都不会显示——哪怕配置完全正确。
常见误区提醒
-
不要写
path: '/'作为空子路由：以/开头会被视为根路径，脱离嵌套上下文 -
不要漏掉
component或redirect：空路径路由必须有渲染目标，否则访问父路径时 - 命名路由 + redirect 更安全：避免硬编码路径字符串，尤其在路径结构调整时不易出错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
