什么是嵌套路由？如何配置和使用嵌套路由？

开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）

嵌套路由（Nested Routes） 是前端开发（特别是单页应用 SPA）中的一个核心概念，主要用于构建具有层级结构的用户界面。

简单来说，就是在一个路由对应的组件内部，再渲染子路由对应的组件。这通常用于布局复杂的页面，例如：后台管理系统（侧边栏不变，内容区变化）、电商网站（分类页不变，商品列表变化）或文档站点。

由于不同的前端框架（如 Vue Router, React Router, Angular Router）配置方式不同，我将分别介绍最主流的 Vue Router (v4) 和 React Router (v6/v7) 的配置与使用方法。

1. 核心概念图解

假设我们要实现一个“用户中心”页面：

父路由：/user -> 显示 UserLayout (包含导航栏)
子路由 1：/user/profile -> 在 UserLayout 内部显示 Profile 组件
子路由 2：/user/settings -> 在 UserLayout 内部显示 Settings 组件

URL 结构：/user/profile
DOM 结构：

html

预览

1<div id="app">
2  <UserLayout>  <!-- 父组件 -->
3    <h1>用户中心</h1>
4    <nav>...</nav>
5    
6    <!-- 子路由视图出口 -->
7    <Profile /> <!-- 这里动态渲染子组件 -->
8    
9  </UserLayout>
10</div>

2. Vue Router 中的嵌套路由 (Vue 3 + Vue Router 4)

在 Vue 中，嵌套路由通过 children 数组配置，并在父组件中使用 <router-view> 作为占位符。

A. 路由配置 (`router/index.js`)

javascript

编辑

1import { createRouter, createWebHistory } from 'vue-router'
2import UserLayout from '@/views/UserLayout.vue'
3import UserProfile from '@/views/UserProfile.vue'
4import UserSettings from '@/views/UserSettings.vue'
5
6const routes = [
7  {
8    path: '/user',
9    component: UserLayout,
10    // 关键点：定义 children 数组
11    children: [
12      {
13        // 路径不要加斜杠 '/' 开头，否则会变成绝对路径 /profile
14        path: 'profile', 
15        component: UserProfile,
16        name: 'UserProfile'
17      },
18      {
19        path: 'settings',
20        component: UserSettings,
21        name: 'UserSettings'
22      },
23      {
24        // 默认子路由：访问 /user 时默认显示 Profile
25        path: '', 
26        redirect: 'profile' 
27      }
28    ]
29  }
30]
31
32const router = createRouter({
33  history: createWebHistory(),
34  routes
35})
36
37export default router

B. 父组件模板 (`UserLayout.vue`)

父组件必须包含 <router-view>，子组件将渲染在这里。

html

预览

1<template>
2  <div class="user-layout">
3    <h2>用户中心</h2>
4    <nav>
5      <!-- 使用 router-link 跳转，路径可以是相对的 -->
6      <router-link to="profile">个人资料</router-link> |
7      <router-link to="settings">设置</router-link>
8    </nav>
9
10    <!-- 子路由出口：子组件渲染在此处 -->
11    <router-view />
12    
13    <!-- 也可以具名出口，用于更复杂的布局 -->
14    <!-- <router-view name="sidebar" /> -->
15  </div>
16</template>

C. 如何访问

访问 /user/profile -> 显示 UserLayout + UserProfile
访问 /user/settings -> 显示 UserLayout + UserSettings

3. React Router 中的嵌套路由 (React Router v6/v7)

在 React Router v6 中，嵌套路由主要通过 <Outlet /> 组件和路由配置对象（或 JSX 嵌套）来实现。

方式一：使用 JSX 嵌套配置 (推荐，直观)

jsx

预览

1// App.jsx
2import { BrowserRouter, Routes, Route, Outlet, Link } from "react-router-dom";
3import UserLayout from "./UserLayout";
4import UserProfile from "./UserProfile";
5import UserSettings from "./UserSettings";
6
7function App() {
8  return (
9    <BrowserRouter>
10      <Routes>
11        {/* 父路由 */}
12        <Route path="user" element={<UserLayout />}>
13          
14          {/* 子路由：path 不需要前导斜杠 */}
15          <Route path="profile" element={<UserProfile />} />
16          <Route path="settings" element={<UserSettings />} />
17          
18          {/* 默认重定向或索引路由 */}
19          <Route index element={<UserProfile />} /> 
20          {/* 或者使用 redirect: <Route index redirect="profile" /> (v6.4+ data routers) */}
21          
22        </Route>
23        
24        {/* 其他普通路由 */}
25        <Route path="/" element={<Home />} />
26      </Routes>
27    </BrowserRouter>
28  );
29}

父组件模板 (`UserLayout.jsx`)

父组件必须渲染 <Outlet />，这是子组件的挂载点。

jsx

预览

1import { Outlet, NavLink } from "react-router-dom";
2
3export default function UserLayout() {
4  return (
5    <div className="user-layout">
6      <h2>用户中心</h2>
7      <nav>
8        {/* to 属性可以是相对路径 */}
9        <NavLink to="profile">个人资料</NavLink> |
10        <NavLink to="settings">设置</NavLink>
11      </nav>
12
13      <hr />
14      
15      {/* 关键点：子路由在此处渲染 */}
16      <Outlet />
17      
18    </div>
19  );
20}

方式二：使用对象配置 (适合集中管理)

如果你更喜欢像 Vue 那样集中配置路由表（特别是在使用 createBrowserRouter 时）：

javascript

编辑

1// router-config.js
2import { createBrowserRouter } from "react-router-dom";
3import UserLayout from "./UserLayout";
4import UserProfile from "./UserProfile";
5import UserSettings from "./UserSettings";
6
7export const router = createBrowserRouter([
8  {
9    path: "/user",
10    element: <UserLayout />,
11    children: [
12      {
13        path: "profile",
14        element: <UserProfile />,
15      },
16      {
17        path: "settings",
18        element: <UserSettings />,
19      },
20      {
21        index: true, // 对应 path: ''
22        element: <UserProfile />,
23      }
24    ],
25  },
26]);

4. 嵌套路由的关键注意事项

路径写法（Relative vs Absolute）：
- 在配置子路由 path 时，不要加前导斜杠 /。
- ✅ 正确：path: 'profile' (拼接到父路径后变成 /user/profile)
- ❌ 错误：path: '/profile' (这会变成根路径 /profile，脱离父级)
出口组件（View/Outlet）：
- 如果父组件中没有放置 <router-view> (Vue) 或 <Outlet /> (React)，子路由即使匹配成功，也不会显示任何内容。
导航链接：
- 在嵌套层级内部进行跳转时，可以使用相对路径（如 to="profile"），也可以使用绝对路径（如 to="/user/profile"）。相对路径通常更灵活，便于重构。
权限控制：
- 嵌套路由非常适合做权限守卫。你可以在父路由（如 /admin）上统一做登录校验，一旦通过，所有子路由自动继承该权限状态；或者在每个子路由上单独配置元信息（meta fields）进行细粒度控制。
数据加载 (Advanced)：
- 在现代框架（Vue 3 + Pinia/React Query 或 React Router v6.4+ Loaders）中，可以利用嵌套路由的特性，让父路由加载基础数据（如用户信息），子路由加载特定数据（如订单列表），避免重复请求。

总结

表格

特性	Vue Router	React Router (v6+)
配置位置	`routes` 数组中的 `children` 字段	`<Route>` 组件嵌套或 `children` 数组
渲染出口	`<router-view />`	`<Outlet />`
子路径写法	不加 `/` (e.g., `'profile'`)	不加 `/` (e.g., `'profile'`)
默认子路由	`path: ''` 配合 `redirect` 或直接组件	`index` 属性 (`<Route index ... />`)

嵌套路由是构建大型、结构化 Web 应用的基石，合理使用可以让你的代码逻辑更清晰，用户体验更流畅。

1. 核心概念图解

2. Vue Router 中的嵌套路由 (Vue 3 + Vue Router 4)

A. 路由配置 (router/index.js)

B. 父组件模板 (UserLayout.vue)

C. 如何访问

3. React Router 中的嵌套路由 (React Router v6/v7)

方式一：使用 JSX 嵌套配置 (推荐，直观)

父组件模板 (UserLayout.jsx)

方式二：使用对象配置 (适合集中管理)

4. 嵌套路由的关键注意事项

总结

相关文章

A. 路由配置 (`router/index.js`)

B. 父组件模板 (`UserLayout.vue`)

父组件模板 (`UserLayout.jsx`)