Vue Router 命名视图允许同一路由下多个 渲染不同组件，适用于侧边栏、头部等复杂布局；需用 name 属性标识视图，并在路由配置中通过 components 对象映射组件。

Vue Router 的命名视图（Named Views）允许你在同一个路由下，把不同组件渲染到多个 <router-view></router-view> 中——这特别适合复杂布局，比如带侧边栏、顶部导航、主内容区、底部工具栏的页面。

一、基础：给 router-view 起名字

默认的 <router-view></router-view> 是匿名的，只匹配 default 组件。要启用多视图，需显式命名：

在模板中写：

注意：name 值必须是合法字符串（不能含空格或特殊符号），default 可省略 name 属性，但不能重复定义。

二、路由配置：用 components 对象映射多个视图

在路由记录中，不再用 component，而是用 components（复数）对象，键为视图名，值为对应组件：

{
  path: '/dashboard',
  components: {
    default: DashboardMain,
    header: PageHeader,
    sidebar: DashboardSidebar,
    footer: PageFooter
  }
}

所有命名视图会**同时渲染**，且各自独立响应路由变化。如果某个视图没被定义（比如漏了 header），对应位置就为空白，不会报错。

三、嵌套路由 + 命名视图：实现更精细控制

命名视图可与嵌套路由结合。例如主区域用 default，侧边栏固定，但子页面切换时只更新主内容：

{
  path: '/project',
  components: {
    default: ProjectLayout,
    sidebar: ProjectSidebar
  },
  children: [
    {
      path: '',
      components: { default: ProjectOverview }
    },
    {
      path: 'tasks',
      components: { default: TaskList }
    }
  ]
}

此时 ProjectLayout 是一个包裹容器，内部仍有 <router-view></router-view> 渲染子路由；而 ProjectSidebar 由父级路由直接指定，不随子路由变化。

四、实用技巧与注意事项

• 组件复用灵活：同一组件可在多个视图中使用（如不同页面共用同一个 UserAvatar 视图），只需在 components 里多次引用
• 懒加载支持：每个视图组件都可单独异步导入：header: () => import('@/views/Header.vue')
• 没有父子依赖：命名视图之间不传递 props，也不共享生命周期。如需通信，走事件总线、Pinia 或 provide/inject
• 避免命名冲突：全局路由中视图名需唯一；若多个路由共用相同视图名（如都用 toolbar），确保组件逻辑能适配不同上下文

命名视图不是“高级功能”，而是解决真实布局问题的简洁方案——不需要嵌套组件、不增加状态管理负担，只要合理规划视图职责，复杂界面也能清晰可控。