来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示

命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用

命名视图的概念类似具名插槽，并且视图的默认名称也是default

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件，需要确保正确使用components配置

/router/index.ts：

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
26
27
28
29
30
31
32
33
34
35
36
import { createRouter, createWebHistory } from "vue-router"
import type { RouteRecordRaw } from "vue-router"

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: ()=> import("../components/root.vue"),
    children: [
      {
        path: "/user1",
        // 定义多个命名的路由，需要使用components
        components: {
          // 默认的路由
          bbb: ()=> import("../components/B.vue"),
          default: ()=> import("../components/A.vue")
        }
      },
      {
        path: "/user2",
        // 定义多个命名的路由，需要使用components
        components: {
          ccc: ()=> import("../components/C.vue")
        }
      }
    ]
  }
]

const router = createRouter({
  // 路由的模式
  history: createWebHistory(),
  // 路由信息
  routes
})

export default router

root.vue：

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>
    <router-link to="user1">/user1</router-link>
    <router-link style="margin-left: 10px;" to="user2">/user2</router-link>
    <hr>
    <!-- 什么都不写的话，展示default -->
    <router-view></router-view>
    <router-view name="bbb"></router-view>
    <router-view name="ccc"></router-view>
  </div>
</template>