vue router 多级菜单需确保url路径、路由配置、组件嵌套三层严格对齐：一、父路由须为含的布局组件；二、子路由用相对路径写入children；三、设空路径子路由解决/admin默认展示；四、用命名路由+编程式导航适配动态菜单。

Vue Router 配置多级菜单对应的嵌套路由，核心是让 URL 路径层级、路由配置层级、组件嵌套层级三者严格对齐。关键不在于“写几层”，而在于每一层都明确谁是布局容器、谁负责内容渲染、谁提供 <router-view></router-view> 出口。

一、父级路由必须是布局组件，并含 <router-view></router-view>

多级菜单的本质是「固定区域 + 可变内容」。比如后台系统中，左侧菜单和顶部导航长期存在，只有主内容区切换。因此第一级路由（如 /admin）不能直接对应业务页面，而应指向一个布局组件（如 AdminLayout.vue），且该组件模板里必须有 <router-view></router-view> 作为子路由的挂载点：

• AdminLayout.vue 中包含侧边栏、头部、主内容区结构
• 主内容区写 <router-view></router-view>，子路由组件将在此处渲染
• 不能省略这一步——没有 <router-view></router-view>，子路由再配也显示不出来

二、children 配置子路由，路径用相对写法

在路由表中，为布局组件配置 children 数组，每个子项代表一个菜单项。注意：子路径不要加开头斜杠，否则会脱离父级前缀变成根路径：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 正确：{ path: 'dashboard', component: Dashboard } → 实际访问 /admin/dashboard
• 错误：{ path: '/dashboard', component: Dashboard } → 实际访问 /dashboard（脱离 /admin）
• 支持多级嵌套，例如：/admin/system/role 可通过两层 children 实现

三、设置空路径子路由，解决默认展示问题

访问 /admin 时，若没配空路径子路由，<router-view></router-view> 将为空白。需显式定义默认入口：

• 添加 { path: '', component: AdminHome } 或 { path: '', redirect: 'dashboard' }
• 这样 /admin 自动显示首页或跳转到首个子菜单
• 避免用户点击菜单后页面无反应的体验断层

四、命名路由 + 编程式导航，适配动态菜单生成

真实项目中菜单常从后端拉取，硬编码 to="/admin/users" 不可持续。推荐结合命名路由与参数化跳转：

• 给每个子路由加 name，如 name: 'admin-users'
• 菜单项绑定 :to="{ name: item.name, params: item.params }"
• 后续增删菜单只需改数据，无需动路由配置或模板

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！