学习笔记：Vue Router 中的嵌套路由详解[特殊字符]概述

🧩 概述

在构建复杂单页应用（SPA）时，页面结构往往呈现多层次嵌套 。Vue Router 提供了 嵌套路由（Nested Routes） 功能，允许我们通过 URL 的层级关系映射到组件的嵌套结构。

例如：

🔁 嵌套路由基本原理

1. <router-view> 的作用机制

• <router-view> 是一个动态插槽，用于渲染匹配的路由组件。

• 顶层 App.vue 中的 <router-view> 渲染顶级路由组件（如 User）。

• 若 User 组件中也包含 <router-view>，则可渲染其子组件（如 Profile 或 Posts）。

2. 路由配置中的 children 字段

使用 children 数组定义嵌套路由：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      { 
        path: 'profile',           // 实际路径: /user/:id/profile
        component: UserProfile 
      },
      { 
        path: 'posts',             // 实际路径: /user/:id/posts
        component: UserPosts 
      }
    ]
  }
]

✅ 注意：子路径不以 / 开头 ，否则被视为根路径；若以 / 开头，则脱离父级前缀。

3. 默认子路由（空路径）

当访问 /user/123 时，默认不显示任何子组件。可通过设置空路径 ' ' 显示默认内容：

{
  path: '/user/:id',
  component: User,
  children: [
    { path: '', component: UserHome }, // 默认子路由
    { path: 'profile', component: UserProfile }
  ]
}

此时：

• /user/123 → 显示 UserHome

• /user/123/profile → 显示 UserProfile

🏷️ 命名嵌套路由

可以为嵌套路由命名，便于编程式导航或避免硬编码路径。

示例：命名子路由

{
  path: '/user/:id',
  component: User,
  children: [
    { path: '', name: 'user', component: UserHome },
    { path: 'profile', name: 'user-profile', component: UserProfile }
  ]
}

跳转方式：

// 使用名称跳转（需传参）
router.push({ name: 'user', params: { id: '123' } })

区别：

• 访问 /user/123 → 触发 user-parent 路由，但最终仍进入 user 子路由（因为空子路径存在）

• 刷新页面会恢复到子路由状态，因为浏览器按实际 URL 匹配路径

❗ 所以命名父路由主要用于编程导航，刷新后仍会进入子路由。

🚫 忽略父组件（Vue Router 4.1+）

从 Vue Router 4.1 起，支持"仅分组、无组件"的父路由------即父级不指定 component。

场景说明

将具有相同前缀的路由归类管理，比如后台管理系统 /admin/*：

const routes = [
  {
    path: '/admin',
    children: [
      { path: '', component: AdminOverview },
      { path: 'users', component: AdminUserList },
      { path: 'users/:id', component: AdminUserDetails }
    ]
  }
]

此时：

• /admin → 直接渲染 AdminOverview

• /admin/users → 渲染 AdminUserList

• 不需要创建一个空壳 Admin.vue 组件！

✅ 优势：简化结构，提升可维护性。

🎯 实际应用场景总结

应用场景	配置方式	是否需要嵌套视图
用户中心（个人资料、文章等）	使用 children + <router-view>	✅ 是
后台管理模块（admin/*）	可省略父组件，直接分组	❌ 否
默认首页展示	设置空路径 { path: '' }	✅ 是
编程式导航跳转	使用 name 命名路由	可选

💡 关键知识点详解

知识点一：嵌套路由配置与 <router-view> 的对应关系

每个 <router-view> 对应一层 children 配置，形成树状结构，实现 UI 与 URL 的同步更新。

知识点二：命名路由在嵌套中的优先级与行为

命名路由可用于跳转，但页面刷新时始终依据 URL 匹配最深的有效路由，可能导致与预期不符。

知识点三：无组件父路由的路由分组功能

利用父子关系进行逻辑分组，无需创建中间组件，适用于权限控制、布局隔离等高级场景。

✅ 总结建议

1. 合理使用嵌套：深度不宜超过 3 层，保持清晰易维护。

2. 善用默认子路由 ：避免空白 <router-view>。

3. 命名路由增强可读性：尤其适合大型项目。

4. 灵活选择是否使用父组件：根据业务需求决定是否省略父级组件。

5. **结合 route.params 传递数据** ：子组件可通过 route.params.id 获取动态参数。

📘 延伸学习推荐

• Vue Router 官方文档 - 嵌套路由

• Vue School 免费课程（文中提及）

• 使用 beforeEach 守卫控制嵌套路由权限

• 结合 <router-link> 构建导航菜单

✨ 提示：嵌套路由是构建企业级前端应用的核心技能之一，掌握它意味着你能更好地组织复杂界面与状态流。