命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。 命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用。 命名视图的概念非常类似于“具名插槽”，并且视图的默认名称也是 default。
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' const routes: Array<RouteRecordRaw> = [ { path: "/", components: { default: () => import('../components/layout/menu.vue'), header: () => import('../components/layout/header.vue'), content: () => import('../components/layout/content.vue'), } }, ] const router = createRouter({ history: createWebHistory(), routes }) export default router
对应Router-view 通过name 对应组件
<div> <router-view></router-view> <router-view name="header"></router-view> <router-view name="content"></router-view> </div>
