当前位置：首页 > news >正文

Vue Router （命名视图）

news 2025/11/11 9:17:30

前言：

命名视图（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