vue router命名视图本质是同一层级并列渲染多个，通过name属性区分，路由配置需用components对象映射各视图名与组件，支持布局中多区域独立更新。
Vue Router 的命名视图功能，本质是让多个 <router-view></router-view> 在同一层级并列渲染，互不嵌套、各自独立更新。它不是用来做父子组件嵌套的，而是解决“一个路由下多个区域同步展示”的布局问题——比如 header + sidebar + main + footer 同时存在，且能按需切换其中某一部分。
怎么定义多个命名出口
在布局模板里写多个 <router-view></router-view>，关键靠 name 属性区分：
- 没写
name的那个，自动归为default视图 - 写了
name="header"就叫header视图，对应配置里的components.header - 名字必须是合法标识符（字母、数字、下划线，不能含空格或横线）
- 同一页面中所有
name值不能重复
例如一个主布局文件 MainLayout.vue 可以这样写：
路由配置必须用 components（复数）
不能再用单数的 component:，而要改用 components: 对象，每个 key 对应一个视图名，value 是组件本身：
-
default字段对应无 name 的<router-view></router-view> - 其他字段如
header、sidebar必须与模板中name完全一致 - 某个 name 没在
components中定义，对应位置就空白，不报错
示例路由配置：
import Header from '@/views/Header.vue'import Sidebar from '@/views/Sidebar.vue'
import DashboardMain from '@/views/DashboardMain.vue'
import Footer from '@/views/Footer.vue'
{
path: '/dashboard',
component: MainLayout,
children: [{
path: '',
components: {
default: DashboardMain,
header: Header,
sidebar: Sidebar,
footer: Footer
}
}]
}
配合嵌套路由实现局部刷新
想让侧边栏固定、只换主内容？不需要每次切页面都重载整个布局。做法是：
- 父路由（如
/dashboard）负责固定部分：header、sidebar、footer - 子路由（如
/dashboard/users、/dashboard/settings）只替换default视图（即主内容区） - 父级
components.sidebar不随子路由变化，保持稳定 - 但父布局组件内部仍需保留一个
<router-view></router-view>，用于承接子路由内容
常见误区提醒
容易出错的地方其实很集中：
- 写了
name="sidebar"，但路由里配成components.sideBar（大小写不一致）→ 渲染失败 - 用了
component:单数写法，而不是components:复数 → 只有 default 生效 - 在子路由中漏掉
components配置，导致该级视图空白 - 把命名视图和具名插槽混淆，误以为可以传 props 或 slot 内容 → 命名视图只是组件映射，不传递上下文
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
