嵌套路由是构建管理后台多级视图最自然、最解耦的方式——父路由负责固定布局（如侧边栏+顶部导航），子路由只管内容区域切换，不重复渲染公共部分。

嵌套路由是构建管理后台多级视图最自然、最解耦的方式——父路由负责固定布局（如侧边栏+顶部导航），子路由只管内容区域切换，不重复渲染公共部分。

明确父子职责：Layout 是壳，子页面是内容

管理后台典型结构是「固定布局 + 动态内容」。你需要一个 Layout 组件作为父容器，它内部包含导航栏、侧边栏和一个 占位符，所有子页面都渲染在这个出口里。

• Layout.vue 不写业务逻辑，只定义骨架和公共 UI 元素
• Dashboard、UserList、OrderDetail 等都是纯内容组件，彼此独立
• 路由配置中，Layout 对应一级路径（如 /admin），子组件通过 children 挂载到它下面

路由配置：用 children 定义层级，路径相对父级

在 src/router/index.js 中，一级路由指向 Layout，它的 children 数组声明所有可切换的子页面：

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

• 父路径为 /admin，子路由 path: 'dashboard' 实际访问地址是 /admin/dashboard
• path: '' 表示空子路径，用于默认展示（比如访问 /admin 时显示 Dashboard）
• 三级路由可继续嵌套：在 UserList 的 children 里加 { path: 'detail/:id', component: UserDetail }

模板配合：父组件必须有 才能渲染子内容

Layout.vue 模板中，除了 header 和 sidebar，关键是要留出一个 标签：

• 这个标签就是子路由组件的“插入点”，没有它，children 配置不会生效
• 如果需要多个独立区域（比如同时显示菜单 + 主内容 + 右侧工具栏），可用命名视图： 配合 components 选项
• 子页面跳转统一用 或 router.push('/admin/orders')

避免两个常见错误

实际开发中最容易卡在这两处：

• 子路由 path 写了斜杠：比如写成 path: '/users'，这会被当作根路径，脱离父级上下文
• 父组件漏掉 ：Layout 渲染出来了，但子页面始终不出现，检查模板是否遗漏该标签

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！