Vue 教程：使用 Vue Router 的嵌套路由与命名视图构建复杂布局

在构建大型单页应用时，页面往往由多个相互嵌套的组件区域组成，例如后台管理系统的侧边栏、顶部导航与主内容区。Vue Router 的嵌套路由与命名视图正是解决这类复杂布局问题的核心工具。本教程面向已掌握 Vue 基础、熟悉组件化开发的读者，建议在 Node.js 环境（版本 ^20.19.0 || >=22.12.0）下使用 Vite 构建工具进行实践。

核心概念与原理

Vue 是一个渐进式 JavaScript 框架，其核心库专注于视图层，而 Vue Router 则是官方推荐的路由管理器。嵌套路由允许你在一个路由组件内部渲染子路由组件，形成父子级的视图层级；命名视图则允许你在同一路由层级下，为不同的 <router-view> 指定不同的组件。两者结合，可以灵活控制页面不同区域的渲染内容，实现类似传统多页面框架的布局效果。

实战步骤与代码

以下通过一个后台管理系统的案例，演示如何组合使用嵌套路由与命名视图。

1. 创建项目并安装路由

使用 Vite 创建 Vue 项目，并在交互提示中启用 Vue Router：

npm create vue@latest
在提示中选择 Add Vue Router for Single Page Application development? Yes

2. 定义嵌套路由

在路由配置中，通过 children 属性定义子路由。父组件需要包含 <router-view> 作为子路由的出口：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import AdminLayout from '../views/AdminLayout.vue'
import Dashboard from '../views/Dashboard.vue'
import UserList from '../views/UserList.vue'
const routes = [ { path: '/admin', component: AdminLayout, children: [ { path: '', component: Dashboard }, // 默认子路由 { path: 'users', component: UserList } ] } ]
export default createRouter({ history: createWebHistory(), routes })

3. 使用命名视图

在父组件中，为不同的 <router-view> 命名，并在路由配置中通过 components 指定对应区域渲染的组件：

<!-- AdminLayout.vue -->
<template>
  <div class="layout">
    <aside><router-view name="sidebar" /></aside>
    <main><router-view /></main>
  </div>
</template>

// 路由配置更新
const routes = [
  {
    path: '/admin',
    components: {
      default: AdminLayout,
      sidebar: SidebarNav
    },
    children: [
      { path: '', component: Dashboard },
      { path: 'users', component: UserList }
    ]
  }
]

4. 链接与导航

使用 <router-link> 进行声明式导航，其 to 属性支持路径字符串或对象形式：

<nav>
  <router-link to="/admin">概览</router-link>
  <router-link to="/admin/users">用户管理</router-link>
</nav>

常见坑点与优化

坑点一：忘记添加子路由出口。 父组件中必须包含 <router-view>，否则子路由无法渲染。

坑点二：路径拼接错误。 子路由的 path 不要以 / 开头，否则会被视为绝对路径。

优化建议： 使用路由懒加载，将组件按路由维度拆分，通过动态导入减少首屏加载体积：

const UserList = () => import('../views/UserList.vue')

通过以上步骤，你可以灵活运用嵌套路由与命名视图，构建出结构清晰、易于维护的复杂页面布局。