Vue Router （命名视图）

前言：

命名视图（Named Views） 允许你在同一个路由下渲染多个组件。

常见使用场景：

场景	说明
布局系统	比如在布局中同时展示 `header`、`sidebar`、`main content`
多区域页面	一个页面包含顶部导航、侧边栏、主内容区、底部等，每个区域都是独立的组件
复杂 UI 结构	不同区域需要加载不同组件，比如左侧菜单 + 右侧内容 + 顶部用户信息栏

1、基本使用

例如创建一个布局，有 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" />

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

一个路由，多个视图，components对象来定义，name对应 <router-view name="xxx">。

2、命名视图嵌套

嵌套路由 ：路由之间有父子关系，子路由渲染到父路由的 <router-view>中。

命名视图 ：一个 <router-view>通过 name区分，可以渲染不同的组件。

嵌套命名视图 ：在 嵌套路由结构中，使用多个命名 <router-view name="xxx">，并在路由配置中为这些视图指定不同的组件。

src/

├── views/

│ ├── AdminLayout.vue <-- 父布局，含多个命名 router-view

│ ├── AdminHeader.vue

│ ├── AdminSidebar.vue

│ ├── AdminMain.vue

│ ├── UserList.vue

│ ├── UserForm.vue

│ ├── UserDetail.vue

├── router/

│ └── index.js

父级布局：

复制代码

<template>
  <div class="admin-layout">
    <!-- 命名视图：Header -->
    <router-view name="header"></router-view>

    <div style="display: flex;">
      <!-- 命名视图：Sidebar -->
      <router-view name="sidebar"></router-view>

      <!-- 默认视图：Main（也可以命名为 main） -->
      <router-view></router-view>
    </div>
  </div>
</template>

路由配置：

复制代码

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

import AdminLayout from '@/views/AdminLayout.vue'
import AdminHeader from '@/views/AdminHeader.vue'
import AdminSidebar from '@/views/AdminSidebar.vue'
import AdminMain from '@/views/AdminMain.vue'
import UserList from '@/views/UserList.vue'
import UserForm from '@/views/UserForm.vue'

const routes = [
  {
    path: '/admin',
    component: AdminLayout,  // 父布局组件
    children: [
      {
        path: '',
        components: {  // 注意：这里是 components（多个命名视图）
          header: AdminHeader,
          sidebar: AdminSidebar,
          default: AdminMain  // 默认视图
        }
      },
      {
        path: 'users',
        components: {
          header: AdminHeader,     // 复用
          sidebar: AdminSidebar,   // 复用
          default: UserList        // 主内容区显示用户列表
        }
      },
      {
        path: 'users/new',
        components: {
          header: AdminHeader,
          sidebar: AdminSidebar,
          default: UserForm       // 显示新建用户表单
        }
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

`3、component`和 `components`有什么区别？

属性	说明
`component`	只能指定单个组件，用于普通路由
`components`	可以指定多个命名组件，用于命名视图（注意有 s）

Vue Router （命名视图）

前言：

1、基本使用

2、命名视图嵌套

3、component和 components有什么区别？

`3、component`和 `components`有什么区别？