命名视图 | Vue Router

什么是命名视图？

命名视图允许你在同一层级同时展示多个视图组件，而不是传统的嵌套展示方式。这在创建复杂布局时特别有用，比如带有侧边栏和主内容区的页面布局。

基本用法

定义命名视图

在模板中，你可以使用多个带有 name 属性的 <router-view> 组件：

<router-view class="view left-sidebar" name="LeftSidebar" />
<router-view class="view main-content" />
<router-view class="view right-sidebar" name="RightSidebar" />

💡 注意：没有设置 name 的 <router-view> 默认为 default 视图。

配置路由组件

由于一个路由需要渲染多个组件，你需要使用 components 配置（注意是复数形式）：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,           // 对应默认视图
        LeftSidebar,             // 简写形式，对应 LeftSidebar 视图
        RightSidebar: RightSidebar // 完整形式
      },
    },
  ],
})

嵌套命名视图实战

让我们通过一个设置页面的例子来理解复杂的嵌套视图布局：

布局结构

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+

组件结构

UserSettings.vue - 顶级布局组件：

<template>
  <div>
    <h1>用户设置</h1>
    <NavBar />
    <router-view />              <!-- 默认视图 -->
    <router-view name="helper" /> <!-- 辅助视图 -->
  </div>
</template>

路由配置

{
  path: '/settings',
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions  // 只渲染到默认视图
  }, {
    path: 'profile',
    components: {                       // 注意这里是复数形式
      default: UserProfile,            // 渲染到默认视图
      helper: UserProfilePreview        // 渲染到辅助视图
    }
  }]
}

使用场景和优势

典型应用场景

1. 管理后台 - 侧边栏 + 主内容区 + 工具栏
2. 文档站点 - 导航栏 + 内容区 + 目录树
3. 电商平台 - 商品列表 + 筛选面板 + 购物车预览

主要优势

• 布局灵活 - 不受嵌套路由的结构限制
• 组件复用 - 相同的视图组件可以在不同路由中重用
• 维护简单 - 清晰的视图分离，便于团队协作开发

最佳实践

1. 命名规范 - 使用有意义的视图名称，如 sidebar、main、footer 等
2. 组件设计 - 每个命名视图对应的组件应该是独立的、可复用的
3. 响应式考虑 - 在不同屏幕尺寸下合理处理多个视图的显示逻辑

🚀 提示：命名视图与 Vue 的组件系统完美结合，让你可以构建出既美观又功能强大的用户界面。