命名视图

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar（侧导航）和main（主内容）两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为default。

HTML 

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用components配置（带上 s）：

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        // 它们与 `` 上的 `name` 属性匹配
        default: Home,	
        LeftSidebar,   // LeftSidebar: LeftSidebar 的缩写        
        RightSidebar,
      },
    },
  ],
})

嵌套命名视图

我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套router-view组件。我们以一个设置面板为例：

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

• Nav只是一个常规组件。
• UserSettings是一个视图组件。
• UserEmailsSubscriptions、UserProfile、UserProfilePreview是嵌套的视图组件。

注意：我们先忘记 HTML/CSS 具体的布局的样子，只专注在用到的组件上。

UserSettings组件的部分应该是类似下面的这段代码：

 
User Settings
  

然后你可以用这个路由配置完成该布局：

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings, children: [
    {
      path: 'emails',
      component: UserEmailsSubscriptions
    }, 
    {
      path: 'profile',
      components: {
        default: UserProfile,
        helper: UserProfilePreview
      }
    },
 ]
}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com