• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 命名视图

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

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

    一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用components配置(带上 s):

    import { createRouter, createWebHistory } from "vue-router";
    
    const router = createRouter({
      history: createWebHashHistory(),
      routes: [
        {
          path: '/',
          components: {
            // 它们与 `<router-view>` 上的 `name` 属性匹配
            default: Home,	
            LeftSidebar,   // LeftSidebar: LeftSidebar 的缩写        
            RightSidebar,
          },
        },
      ],
    })
    


    嵌套命名视图

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

    /settings/emails                                       /settings/profile
    +-----------------------------------+                  +------------------------------+
    | UserSettings                      |                  | UserSettings                 |
    | +-----+-------------------------+ |                  | +-----+--------------------+ |
    | | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
    | |     +-------------------------+ |                  | |     +--------------------+ |
    | |     |                         | |                  | |     | UserProfilePreview | |
    | +-----+-------------------------+ |                  | +-----+--------------------+ |
    +-----------------------------------+                  +------------------------------+
    
    • Nav只是一个常规组件。
    • UserSettings是一个视图组件。
    • UserEmailsSubscriptionsUserProfileUserProfilePreview是嵌套的视图组件。

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

    UserSettings组件的<template>部分应该是类似下面的这段代码:

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

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

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

    上篇:命名路由

    下篇:重定向和别名