当前位置：首页 > news >正文

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

news 2025/9/27 12:25:09

🧩 概述

在构建复杂单页应用（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/profilecomponent: UserProfile },{ path: 'posts',             // 实际路径: /user/:id/postscomponent: 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` 命名路由	可选