Vue嵌套（多级）路由一、前言在构建中大型单页应用（SPA）时，页面结构往往比较复杂，比如仪表盘、用户中心、商品管

一、前言

在构建中大型单页应用（SPA）时，页面结构往往比较复杂，比如仪表盘、用户中心、商品管理等模块通常包含多个子功能页面。为了更好地组织这些页面，Vue Router 提供了嵌套（多级）路由的功能。

通过嵌套路由，我们可以在父级组件中嵌入一个 <router-view> 来展示子级组件，实现类似“布局 + 内容”的结构。

本文将带你深入了解：

Vue 嵌套路由的基本概念；
如何配置嵌套路由；
父子组件之间的结构关系；
实际开发中的常见使用场景；
推荐的最佳实践；

通过这篇文章，你将能够熟练地使用 Vue Router 构建具有层级结构的页面系统。

二、什么是嵌套路由？

嵌套路由（Nested Routes） 是指在一个路由下挂载多个子路由，形成父子结构。常用于构建带有布局结构的页面，如侧边栏 + 主体内容。

✅ 示例结构：

/dashboard
  ├─ /dashboard/profile      → 用户资料页
  └─ /dashboard/settings     → 设置页

📌 特点：

父级路由对应一个布局组件（Layout）；
子路由组件通过 <router-view> 在父组件内部展示；
页面切换时仅替换局部区域，提升用户体验；

三、如何配置嵌套路由？

✅ 步骤一：定义路由结构（`src/router/index.js`）

import { createRouter, createWebHistory } from 'vue-router'
import DashboardLayout from '../views/DashboardLayout.vue'
import Profile from '../views/Profile.vue'
import Settings from '../views/Settings.vue'

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: DashboardLayout,
    children: [
      {
        path: 'profile', // 注意这里没有斜杠 `/profile`，表示是 `/dashboard/profile`
        component: Profile
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
]

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

export default router

📌 小贴士：

子路由路径不需要以 / 开头；
若希望默认显示某个子路由，可添加 redirect：

{
  path: '/dashboard',
  name: 'Dashboard',
  component: DashboardLayout,
  redirect: '/dashboard/profile',
  children: [...]
}

✅ 步骤二：创建父级组件（`DashboardLayout.vue`）

<template>
  <div class="dashboard">
    <h2>仪表盘</h2>
    
    <!-- 导航链接 -->
    <nav>
      <router-link to="/dashboard/profile">个人资料</router-link>
      <router-link to="/dashboard/settings">设置</router-link>
    </nav>

    <!-- 子路由组件在这里显示 -->
    <router-view />
  </div>
</template>

📌 效果说明：

点击导航链接时，右侧的 <router-view> 会动态渲染对应的子组件；
左侧布局部分保持不变，仅更新内容区；

四、嵌套路由的实际应用场景

场景	描述
后台管理系统	多个菜单项共享左侧导航栏或顶部菜单
用户中心	包含订单、地址、账户信息等多个子页面
商品管理	包括商品列表、新增商品、编辑商品等页面
表单向导	分步骤完成表单填写，每一步为一个子路由
动态权限控制	根据用户角色动态加载不同子路由

五、进阶技巧与注意事项

✅ 默认子路由展示

如果你想让某个子路由作为默认展示页面，可以使用 redirect：

{
  path: '/dashboard',
  name: 'Dashboard',
  component: DashboardLayout,
  redirect: '/dashboard/profile',
  children: [
    {
      path: 'profile',
      component: Profile
    },
    ...
  ]
}

✅ 嵌套多层路由（三级及以上）

Vue Router 支持无限层级的嵌套：

{
  path: '/user',
  component: UserLayout,
  children: [
    {
      path: ':id',
      component: UserProfile,
      children: [
        {
          path: 'edit',
          component: EditProfile
        }
      ]
    }
  ]
}

📌 访问路径：

/user/123/edit → 显示 EditProfile 组件

✅ 获取当前路由参数（`params`）

在嵌套结构中，子组件可以通过 $route.params 获取所有层级的参数：

// 路由配置：
// path: '/user/:id/profile'

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出用户 ID
  }
}

✅ 使用命名视图配合嵌套结构（高级用法）

你可以结合命名视图实现更复杂的布局组合：

{
  path: '/layout',
  component: MainLayout,
  children: [
    {
      path: 'content',
      components: {
        default: ContentMain,
        sidebar: SideBar
      }
    }
  ]
}

模板中使用：

<router-view />
<router-view name="sidebar" />

六、常见问题与解决方案

问题	解决方案
子路由不显示	检查是否遗漏了 `<router-view>`
子路由路径错误	路径不要加 `/`，应为相对路径
页面空白无内容	检查组件路径是否正确、是否未匹配任何组件
无法获取 `$route`	确保组件已注册并处于 `<router-view>` 中
页面不刷新但数据没变	使用 `key` 强制重新渲染组件

七、总结对比表

功能	推荐方式
父子路由结构	使用 `children` 配置
默认子路由展示	使用 `redirect`
获取路由参数	`this.$route.params.xxx`
多层嵌套支持	✅ 官方支持
多视图配合	使用命名 `<router-view>`
推荐程度	✅✅ 强烈推荐掌握

八、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！

Vue嵌套（多级）路由