Vue Router中的路由嵌套：主子路由

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • 引言
  • 路由嵌套的基本概念
  • 如何配置路由嵌套
  • • [1. 定义父路由和子路由](#1. 定义父路由和子路由)
    • [2. 在父组件中添加`<router-view>`](#2. 在父组件中添加<router-view>)
  • 路由嵌套的使用场景
  • 注意事项
  • 结论

Vue Router中的路由嵌套：主子路由

引言

在构建大型单页面应用程序（SPA）时，路由嵌套是一种常见的模式，它允许我们将应用的不同部分组织成层次结构。通过主子路由的配置，我们可以创建出结构清晰、易于维护的应用程序路由体系。

路由嵌套的基本概念

路由嵌套指的是在一个路由（父路由）的组件内部，再定义一个或多个子路由。这些子路由通常对应于父路由组件的某个视图区域，例如一个侧边栏或顶部导航栏下的内容区域。

如何配置路由嵌套

1. 定义父路由和子路由

在路由配置中，通过在父路由的children属性中定义子路由来实现嵌套。

const routes = [
{
path: '/parent',
component: ParentComponent,
children: [
{
path: 'child1',
component: Child1Component
},
{
path: 'child2',
component: Child2Component
}
// 更多子路由...
]
}
// 更多路由配置...
];

2. 在父组件中添加<router-view>

为了渲染子路由对应的组件，需要在父组件的模板中添加<router-view>元素。

<!-- ParentComponent.vue -->
<template>
<div>
<h1>Parent Component</h1>
<router-view></router-view> <!-- 子路由将在这里渲染 -->
</div>
</template>

路由嵌套的使用场景

路由嵌套通常用于以下场景：

• 当应用的某个部分需要根据不同的子路径展示不同的内容时。
• 当需要将应用分割成逻辑上相关的多个部分时。
• 当需要实现复杂的布局，如仪表盘、侧边栏导航等。

注意事项

• 子路由的路径是相对于父路由的路径。
• 子路由的<router-view>只需要在父组件中定义一次。
• 子路由可以有自己的嵌套路由，形成多层嵌套结构。

结论

路由嵌套是Vue Router提供的一个强大功能，它允许开发者构建出层次清晰、结构化的应用程序路由。通过合理配置主子路由，可以使得应用程序的路由体系更加模块化和易于管理，同时也为用户提供了更好的导航体验。