Skip to content

命名视图

适用于同级展示多个组件(有点类似插槽),示例:

vue
// 布局组件UserLayout.vue
<template>
  <div class="user-layout">
    <router-view name="header"></router-view>
    <div class="user-content">
      <router-view name="sidebar"></router-view>
      <router-view></router-view>
      <!-- 默认视图 -->
    </div>
  </div>
</template>
js
// 路由配置
  {
    path: '/user',
    component: UserLayout,
    children: [
      {
        path: 'profile',
        components: {
          default: UserProfile,
          sidebar: UserSidebar
        }
      }
    ]
  }