Vue 教程：使用 Vue Router 实现嵌套路由与命名视图的复杂布局编排

在构建大型单页应用时，页面往往由多个独立区域（如侧边栏、头部、内容区）组合而成。Vue Router 的嵌套路由与命名视图正是解决这类复杂布局编排的核心工具。本文面向有一定 Vue 基础的开发者，前置环境要求 Vue 3 与 Vue Router 4，建议使用 Vite 或 Vue CLI 创建项目。

核心概念与原理

Vue Router 通过路由配置将 URL 与组件映射起来，而嵌套路由允许在父路由的组件内部再次渲染子路由组件，形成层级结构。命名视图则允许在同一路由下，将多个组件渲染到不同的 router-view 出口中，从而实现灵活的布局组合。其工作流程是：当 URL 变化时，路由匹配对应的路由记录，渲染出对应的组件树，每个 router-view 根据名称或默认位置填充组件。

实战步骤与代码

1. 创建项目并安装依赖

npm create vue@latest my-app
cd my-app
npm install vue-router@4

2. 定义布局组件与页面组件

创建 Layout.vue 作为主布局，包含头部、侧边栏和内容区，内容区使用 router-view 展示子路由。

<template>
  <div>
    <header>网站头部</header>
    <aside>侧边栏</aside>
    <main>
      <router-view /> <!-- 默认出口 -->
    </main>
  </div>
</template>

3. 配置嵌套路由与命名视图

在路由配置中，父路由使用 children 定义子路由，命名视图通过 components 对象指定。

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: '', component: Home },
      { path: 'about', component: About }
    ]
  },
  {
    path: '/dashboard',
    components: {
      default: DashboardMain,
      sidebar: DashboardSidebar
    }
  }
]

在模板中，命名视图需要指定名称：<router-view name="sidebar" />。

4. 在组件中使用路由链接

<router-link to="/about">关于</router-link>

常见坑点与优化

• 坑点：嵌套路由的路径必须匹配父路由的路径前缀，否则子路由无法正确渲染。
• 坑点：命名视图未指定名称时，默认渲染到 default 出口，容易混淆。
• 优化：使用路由懒加载（() => import()）按需加载组件，减少首屏加载时间。
• 优化：利用 scrollBehavior 控制页面滚动位置，提升用户体验。

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