嵌套路由

Vue Router 提供了多层次的路由视图功能。每个 标签都表示一个嵌套路由视图。这使得在同一个应用中可以实现复杂的嵌套布局和路由逻辑。

在项目中包含多个 <router-view> 标签，这是因为 Vue Router 允许嵌套路由。详细解释：

嵌套路由允许在父组件中嵌套子组件的路由，这样可以组织和管理复杂的路由结构。例如，你可能有一个主布局组件，它包含一个导航栏和一个主内容区域，主内容区域会根据当前的路由展示不同的组件。

在项目中，App.vue 包含一个 <router-view>，这表示主布局区域会根据当前路由展示不同的组件，如登录界面、登录成功后的导航栏和一个主内容区域。而在主内容区域 appMain.vue 中，又嵌套了一个 <router-view>，这表示在这个主内容区域中还可以进一步根据路由展示子组件。

嵌套路由配置

路由配置可以包含嵌套路由。例如，在主布局中可以有一个 ，在某些子组件中也可以有 ，用于渲染进一步嵌套的路由组件。

在项目中有以下路由配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// src/router/index.ts
const publicRoutes: RouteRecordRaw[] = [
  {
    path: "/login",
    name: "Login",
    component: () => import("@/views/login/index.vue"),
  },
  {
    path: "/",
    name: "home",
    component: Layout,
    redirect: "/home",
    children: [
      {
        path: "/home", // 首页
        component: () => import("@/views/home/index.vue"),
      },
      {
        path: "/user", // 用户管理
        component: () => import("@/views/system/user/index.vue"),
      },
    ],
  },
  ...
];

在这个配置中，Layout 组件包含一个 <router-view> 用于展示 Home 和 User 组件。

代码解释

在项目中，src/App.vue 是应用的根组件, 包含一个<router-view> 用于渲染主要内容：

1
2
3
4
5

<template>
   <el-config-provider>
      <router-view />
  </el-config-provider>
</template>

而在 src/layout/main/index.vue 中，有一个嵌套的 <router-view>，这意味着在这个主内容区域内还可以根据子路由展示不同的组件：

1
2
3

<template>
  <router-view></router-view>
</template>

这个结构允许在主内容区域中进一步嵌套子内容，从而实现更复杂的布局和路由结构。

总结

通过使用多个 <router-view>，可以创建复杂的路由结构，嵌套路由和命名视图都可以帮助更好地组织和管理 Vue 3 应用。这个功能使得 Vue Router 非常灵活，能够处理各种复杂的导航需求。

命名视图

允许在同一页面中渲染多个视图。 命名视图允许在同一个路由下显示多个组件。你可以给 <router-view> 标签添加一个 name 属性来指定视图的名称，这样可以在路由配置中定义多个视图。