命名视图

观看 Vue School 上的免费视频课程

有时您需要同时显示多个视图，而不是将它们嵌套，例如创建一个带有 `sidebar` 视图和 `main` 视图的布局。 这就是命名视图派上用场的地方。 而不是在您的视图中只有一个出口，您可以有多个并为每个出口命名。 没有名称的 `router-view` 将被赋予 `default` 作为其名称。

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

视图通过使用组件来渲染，因此多个视图需要同一个路由的多个组件。 确保使用 `components`（带 **s**）选项

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // short for LeftSidebar: LeftSidebar
        LeftSidebar,
        // they match the `name` attribute on `<router-view>`
        RightSidebar,
      },
    },
  ],
})

可以在 这里 找到此示例的工作演示。

嵌套命名视图

可以使用嵌套视图的命名视图创建复杂的布局。 这样做时，您还需要为嵌套的 `router-view` 命名。 让我们以设置面板为例

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

• `Nav` 只是一个普通的组件
• `UserSettings` 是父视图组件
• `UserEmailsSubscriptions`、`UserProfile`、`UserProfilePreview` 是嵌套视图组件

**注意**：让我们忘记 HTML/CSS 应该如何看起来来表示这样的布局，而专注于使用的组件。

上面布局中 `UserSettings` 组件的 `<template>` 部分将如下所示

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar />
  <router-view />
  <router-view name="helper" />
</div>

然后，您可以使用此路由配置来实现上面的布局

{
  path: '/settings',
  // You could also have named views at the top
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

可以在 这里 找到此示例的工作演示。