vue3:四、嵌套路由的实现

一、前言

1、嵌套路由的含义

嵌套路由的核心思想是：在某个路由的组件内部，可以定义子路由，这些子路由会渲染在父路由组件的特定位置（通常是 <router-view> 标签所在的位置）。通过嵌套路由，你可以实现多层级的页面布局。

2、使用场景

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

• ​多层布局：比如一个页面有顶部导航栏、侧边栏和内容区域，内容区域可以根据路由动态变化。
• ​模块化开发：将页面拆分为多个子模块，每个子模块对应一个子路由。
• ​动态路由：根据用户权限或其他条件动态加载子路由。

3、实现方式

在 Vue Router 中，通过 children 属性来定义嵌套路由。children 是一个数组，每个元素都是一个子路由配置对象。

4、实现参考

可参考官网

嵌套路由 | Vue Routerhttps://router.vuejs.org/zh/guide/essentials/nested-routes.html

5、示例展示

// 路由配置
const routes = [
  {
    path: '/parent', // 父路由路径
    component: ParentComponent, // 父路由组件
    children: [
      {
        path: 'child1', // 子路由路径（相对于父路由）
        component: Child1Component // 子路由组件
      },
      {
        path: 'child2',
        component: Child2Component
      }
    ]
  }
];

// 创建路由实例
const router