🦌 Vue Router 嵌套路由 - 配置父子级路由、命名视图、动态路径匹配
🏇 老曹来啦！今天咱们要深入探讨 Vue Router 的嵌套路由，这是构建复杂单页应用（SPA）的核心技能之一。通过本节课，你将掌握如何在Vue 项目中优雅地组织和管理多层级的路由结构。无论是父子级路由配置、命名视图的应用，还是动态路径匹配的实现，都会一一为你揭开面纱。
📖 引言
-
为什么需要嵌套路由？
在实际开发中，很多页面都具有层级关系。例如，一个电商网站可能有
商品列表和商品详情页面，而商品详情又可能包含多个子模块，如评论区和推荐商品。如果把这些内容都堆在一个路由中，代码会变得混乱且难以维护。嵌套路由可以帮助我们清晰地表达这种层级关系，并让代码更加模块化。 -
嵌套路由的核心思想
嵌套路由本质上是通过父子关系来组织路由结构。父路由负责显示整体布局，子路由则负责渲染具体的子模块内容。这种分层设计不仅提高了代码的可读性，还增强了组件的复用性。
-
学习目标
在本节课中，我们将完成以下目标：
- 理解嵌套路由的基本概念及其应用场景。
- 掌握如何在 Vue Router 中定义父子级路由。
- 学习命名视图的使用方法。
- 实现动态路径匹配，支持灵活的参数传递。
- 完成一个综合案例，巩固所学知识。
🎯 学习目标
1. 理解嵌套路由的定义与用途
嵌套路由允许我们在一个路由中再嵌套其他路由，形成树状结构。它适用于页面具有层级关系的场景。
2. 掌握父子级路由的配置方法
学会如何在 Vue Router 中定义父子路由，并理解它们的渲染机制。
3. 使用命名视图实现复杂布局
命名视图可以让我们在同一个页面中渲染多个组件，满足复杂的 UI 需求。
4. 动态路径匹配与参数传递
通过动态路径匹配，我们可以根据 URL 参数动态加载数据或组件。
5. 综合案例：构建一个多层级页面
通过一个完整的案例，将所有知识点串联起来，达到学以致用的效果。
🔧 代码讲解
✅1. 嵌套路由的基本配置
🛠️ 步骤解析
- 在 Vue Router 中，嵌套路由通过在父路由的
children属性中定义子路由来实现。 - 子路由的路径是相对于父路由的路径，因此不需要写完整的路径。
💻 示例代码
javascript
import { createRouter, createWebHistory } from 'vue-router';
import ParentComponent from './components/ParentComponent.vue';
import ChildComponentA from './components/ChildComponentA.vue';
import ChildComponentB from './components/ChildComponentB.vue';
const routes = [
{
path: '/parent',
component: ParentComponent,
children: [
{
path: 'child-a', // 子路由路径相对父路由
component: ChildComponentA,
},
{
path: 'child-b',
component: ChildComponentB,
},
],
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;📝 代码解读
- 父路由 (
/parent) ：定义了一个名为ParentComponent的组件，作为父级容器。 - 子路由 (
child-a和child-b) ：分别对应ChildComponentA和ChildComponentB，它们会被渲染在父组件的<router-view>中。 - 渲染机制 ：当访问
/parent/child-a时，ParentComponent会先被渲染，然后其内部的<router-view>会显示ChildComponentA。
✅2. 命名视图的使用
🛠️ 步骤解析
- 命名视图允许我们在同一个页面中渲染多个组件，每个组件对应一个独立的
<router-view>。 - 需要在路由配置中为每个视图指定名称。
💻 示例代码
javascript
const routes = [
{
path: '/dashboard',
components: {
default: DashboardMain,
sidebar: DashboardSidebar,
header: DashboardHeader,
},
},
];📝 模板部分
html
<template>
<div>
<header>
<router-view name="header"></router-view>
</header>
<aside>
<router-view name="sidebar"></router-view>
</aside>
<main>
<router-view></router-view> <!-- 默认视图 -->
</main>
</div>
</template>📝 代码解读
- 默认视图 ：未命名的
<router-view>会渲染default组件。 - 命名视图 ：通过
name属性指定对应的组件，例如header和sidebar。 - 应用场景：适合需要复杂布局的页面，如仪表盘、后台管理系统等。
✅3. 动态路径匹配
🛠️ 步骤解析
- 动态路径匹配允许我们在路由中定义占位符（如
:id），并从 URL 中提取参数。 - 提取的参数可以通过
$route.params访问。
💻 示例代码
javascript
const routes = [
{
path: '/product/:id',
component: ProductDetail,
},
];📝 模板部分
html
<template>
<div>
<h1>产品详情</h1>
<p>产品 ID: {{ $route.params.id }}</p>
</div>
</template>📝 代码解读
- 动态路径 ：
:id是一个占位符，表示该位置可以匹配任意值。 - 参数获取 ：通过
$route.params.id获取当前路径中的id值。 - 应用场景：常用于商品详情页、文章详情页等需要根据参数动态加载数据的场景。
✅4. 综合案例：多层级页面
🛠️ 场景描述
我们要构建一个电商网站的部分页面，包括：
- 商品列表页（父路由）
- 商品详情页（子路由）
- 评论区（子路由的子路由）
💻 路由配置
javascript
const routes = [
{
path: '/products',
component: ProductList,
children: [
{
path: ':id',
component: ProductDetail,
children: [
{
path: 'reviews',
component: ProductReviews,
},
],
},
],
},
];📝 模板部分
html
<!-- ProductList.vue -->
<template>
<div>
<h1>商品列表</h1>
<router-link to="/products/1">商品 1</router-link>
<router-link to="/products/2">商品 2</router-link>
<router-view></router-view> <!-- 渲染子路由 -->
</div>
</template>
<!-- ProductDetail.vue -->
<template>
<div>
<h2>商品详情</h2>
<p>ID: {{ $route.params.id }}</p>
<router-link :to="`/products/${$route.params.id}/reviews`">查看评论</router-link>
<router-view></router-view> <!-- 渲染子路由 -->
</div>
</template>
<!-- ProductReviews.vue -->
<template>
<div>
<h3>评论区</h3>
<p>这里是商品的评论内容。</p>
</div>
</template>📝 代码解读
- 层级关系 ：
ProductList是父组件，ProductDetail是其子组件，ProductReviews是ProductDetail的子组件。 - 动态路径 ：通过
:id动态加载商品详情。 - 子路由渲染 ：每个父组件都需要包含一个
<router-view>，以渲染其子路由。
🏁 总结
✅1. 嵌套路由的核心优势
嵌套路由通过父子关系组织路由结构，使代码更具层次感，便于维护和扩展。
✅2. 命名视图的应用场景
命名视图适合需要复杂布局的页面，如仪表盘、后台管理系统等。
✅3. 动态路径匹配的灵活性
动态路径匹配可以根据 URL 参数动态加载数据，提升用户体验。
✅4. 综合案例的意义
通过构建一个多层级页面，我们能够将所有知识点融会贯通，真正掌握嵌套路由的使用技巧。
🚀 老曹希望今天的课程能让你对 Vue Router 的嵌套路由有一个全面而深刻的理解。下节课我们将继续探索 Vue Router的高级功能，敬请期待！