命名视图是Vue Router中实现同级多视图并列渲染的机制，通过<router-view name="xxx">与路由配置中components对象的键值映射，支持default及其他自定义命名视图同时展示且互不嵌套。
命名视图是 Vue Router 提供的一种机制，让你能在同一个路由下，把不同组件分别渲染到多个 <router-view> 中——不是嵌套，而是并列显示。比如页面有顶部导航、侧边栏、主内容区、底部工具栏，它们可以各自独立更新，互不影响。
命名视图怎么定义？
关键在 <router-view> 的 name 属性：
- 没写 name 的
<router-view>默认叫default，只匹配components.default - 写了 name 的，比如
<router-view name="header"></router-view>，就对应components.header - name 值必须是合法字符串（如
sidebar、footer），不能含空格或特殊符号 - 同一页面中，name 不能重复；但某个 name 在路由配置里没定义，对应位置就留空，不报错
路由配置要改用 components（复数）
不能再用单数的 component，而要用 components 对象，把每个视图名和组件一一对应：
{
path: '/dashboard',
components: {
default: DashboardMain,
header: PageHeader,
sidebar: DashboardSidebar,
footer: PageFooter
}
}所有匹配的视图会同时渲染，且各自响应路由变化。只要路径命中，这四个组件就一起上，彼此解耦。
配合嵌套路由做局部刷新
想让侧边栏固定、只换主内容？可以结合 children 和命名视图：
- 父路由指定固定部分（如
sidebar），子路由只管default主区域 - 父级
components.sidebar不随子路由切换，而<router-view>（即 default）在子路由中动态替换 - 主布局组件内部仍需保留一个
<router-view>，用于承接子路由内容
实际布局模板长什么样？
以 MainLayout.vue 为例：
<template>
<div class="layout">
<router-view name="header"></router-view>
<div class="main-area">
<router-view name="sidebar"></router-view>
<main class="content">
<router-view></router-view> <!-- default -->
</main>
</div>
<router-view name="footer"></router-view>
</div>
</template>结构清晰，职责分明，改哪块就配哪块，不用拆一堆嵌套布局组件。
