Vue Router 路由管理如何使用嵌套路由构建管理后台的多级视图

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

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

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

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

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

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

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

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

模板配合：父组件必须有 <router-view> 才能渲染子内容

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

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

避免两个常见错误

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

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