Vue嵌套（多级）路由
一、前言
在实际开发中，我们经常会遇到这样的需求：
“点击‘用户管理’，进入一个包含侧边栏的布局页面，再点击‘用户列表’或‘用户详情’，只更新右侧内容区。”
这种 “局部更新” + “层级导航” 的结构，正是 嵌套路由（Nested Routes） 的典型应用场景。
嵌套路由允许我们在一个组件内部再定义子路由，从而实现 多层级页面结构，非常适合后台管理系统、电商平台分类页等复杂布局。
本文将带你： ✅ 理解嵌套路由的核心思想
✅ 从零搭建一个多级路由项目
✅ 掌握 children 配置与 <router-view> 嵌套
✅ 避开常见坑点，写出清晰的路由结构
二、什么是嵌套路由？
1. 普通路由 vs 嵌套路由
| 类型 | 结构 | 特点 |
|---|---|---|
| 普通路由 | /home → Home/about → About | 页面级跳转，全屏更新 |
| 嵌套路由 | /admin → AdminLayout/admin/users → UserList/admin/posts → PostList | 局部更新，保留父级布局 |
2. 核心思想
- 父组件（如
AdminLayout）负责整体布局（头部、侧边栏） - 子组件（如
UserList）只负责内容区域 - 子路由的组件通过
<router-view>在父组件中渲染
📌 一句话理解：
嵌套路由 = 父级组件 + 内部的<router-view>+ 子路由配置
三、实战：搭建一个后台管理系统路由
1. 项目结构规划
src/
├── views/
│ ├── AdminLayout.vue # 后台布局（父组件）
│ ├── Dashboard.vue # 首页
│ ├── UserList.vue # 用户列表
│ ├── UserDetail.vue # 用户详情
│ ├── PostList.vue # 文章列表
│ └── NotFound.vue # 404 页面
└── router/└── index.js # 路由配置2. 创建父级布局组件：AdminLayout.vue
<!-- views/AdminLayout.vue -->
<template><div class="admin-layout"><!-- 顶部导航 --><header class="admin-header"><h2>后台管理系统</h2><span>欢迎，管理员</span></header><!-- 左侧菜单 --><aside class="admin-sidebar"><ul><li><router-link to="/admin">仪表盘</router-link></li><li><router-link to="/admin/users">用户管理</router-link></li><li><router-link to="/admin/posts">文章管理</router-link></li></ul></aside><!-- 主内容区：子路由组件在这里渲染 --><main class="admin-main"><router-view></router-view></main></div>
</template><script>
export default {name: 'AdminLayout'
}
</script><style>
.admin-layout {display: flex;min-height: 100vh;
}
.admin-header {height: 60px;background: #333;color: white;display: flex;align-items: center;justify-content: space-between;padding: 0 20px;width: 100%;
}
.admin-sidebar {width: 200px;background: #f4f4f4;padding: 20px 0;
}
.admin-sidebar ul {list-style: none;padding: 0;
}
.admin-sidebar li {padding: 10px 20px;
}
.admin-sidebar a {text-decoration: none;color: #333;
}
.admin-sidebar a.router-link-active {background: #007bff;color: white;padding: 10px 20px;border-radius: 4px;
}
.admin-main {flex: 1;padding: 20px;background: #f9f9f9;
}
</style>3. 配置嵌套路由：router/index.js
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'// 引入组件
const AdminLayout = () => import('../views/AdminLayout.vue')
const Dashboard = () => import('../views/Dashboard.vue')
const UserList = () => import('../views/UserList.vue')
const UserDetail = () => import('../views/UserDetail.vue')
const PostList = () => import('../views/PostList.vue')
const NotFound = () => import('../views/NotFound.vue')const routes = [// 普通路由{ path: '/', redirect: '/admin' },// 嵌套路由：后台管理{path: '/admin',component: AdminLayout,// 子路由children: [// 默认子路由（访问 /admin 时显示）{ path: '', component: Dashboard, meta: { title: '仪表盘' } },// 用户管理{path: 'users',component: UserList,meta: { title: '用户列表' },// 更深层嵌套（可选）children: [{path: 'detail/:id',component: UserDetail,meta: { title: '用户详情' }}]},// 文章管理{ path: 'posts', component: PostList, meta: { title: '文章列表' } }]},// 404 页面（放最后）{ path: '/:pathMatch(.*)*', component: NotFound }
]const router = createRouter({history: createWebHistory(),routes
})export default router✅ 关键点说明：
children数组定义子路由- 子路由的
path是相对路径（如'users'实际对应/admin/users）path: ''表示默认子路由，访问/admin时显示Dashboard
4. 创建子组件（示例：UserList.vue）
<!-- views/UserList.vue -->
<template><div class="user-list"><h3>用户管理</h3><p>这里是用户列表页面。</p><ul><li v-for="user in users" :key="user.id">{{ user.name }}<router-link :to="`/admin/users/detail/${user.id}`">查看详情</router-link></li></ul></div>
</template><script>
export default {data() {return {users: [{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王五' }]}}
}
</script>✅ 注意：
<router-link to="/admin/users/detail/1">中的路径是完整路径，因为UserDetail是users的子路由。
四、嵌套路由的核心要点
1. <router-view> 的嵌套
- 父组件中必须有
<router-view>，否则子组件无法渲染 - 可以多层嵌套，实现三级、四级路由
<!-- AdminLayout.vue -->
<router-view></router-view> <!-- 渲染 UserList --><!-- UserList.vue -->
<router-view></router-view> <!-- 渲染 UserDetail（如果配置了 children） -->2. 路径规则
| 配置 | 实际路径 |
|---|---|
path: 'users' | /admin/users |
path: '/users' | /users（绝对路径，脱离父级） |
path: '' | /admin（默认子路由） |
⚠️ 注意：子路由路径不要以
/开头，否则会变成根路径！
3. 路由元信息（meta）
可用于设置页面标题、权限、面包屑等：
children: [{ path: 'users', component: UserList, meta: { title: '用户列表', requiresAuth: true } }
]在导航守卫中使用：
router.beforeEach((to) => {document.title = to.meta.title || '后台系统'
})五、常见问题与解决方案
❓ 子路由组件不显示？
检查：
- 父组件中是否有
<router-view> - 子路由的
path是否以/开头（应为相对路径） - 路由配置是否正确导入
❓ 访问 /admin 显示空白？
确保配置了默认子路由：
{ path: '', component: Dashboard }❓ 如何实现三级路由？
继续在 children 中嵌套 children：
{path: 'users',component: UserList,children: [{path: 'detail/:id',component: UserDetail,children: [{ path: 'logs', component: UserLogs } // 三级路由]}]
}六、总结
| 概念 | 说明 |
|---|---|
| 嵌套路由 | 在父路由内部定义 children 子路由 |
children | 定义子路由数组，路径为相对路径 |
<router-view> | 子组件在此渲染，可多层嵌套 |
| 默认子路由 | path: '' 对应父路径 |
| 路由元信息 | meta 字段用于存储额外信息 |
📌 一句话掌握嵌套路由：
父组件布局 +<router-view>+children配置 = 多级页面结构
七、结语
感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！