Vue路由嵌套的核心是children配置与占位配合，需确保父组件含、子path为相对路径、父子组件层级对应正确。

Vue 路由嵌套的核心是 children 配置 + 占位，不是多写几个 router-link 就完事。关键在于父子路由的路径拼接规则、组件层级对应关系，以及子路由如何正确渲染。

一、父路由必须有 才能显示子页面

很多新手卡在这一步：写了 children，但子组件死活不出现。原因通常是父组件里漏了 <router-view></router-view> —— 它就像一个“插槽”，告诉 Vue：“子路由的组件该往这儿塞”。

• 父组件（比如 Home.vue）模板中必须包含：<router-view></router-view>
• 没有它，即使路由配置正确，子组件也完全不会被加载或渲染
• 它可放在任意位置（头部、侧边、主内容区），决定子页面的展示区域

二、children 的 path 是相对路径，自动拼在父 path 后面

子路由的 path 不写开头斜杠，否则就变成根路径了。Vue Router 会自动把父级 path 和子级 path 连起来。

• 父路由：{ path: '/user', component: User }
• 子路由：{ path: 'profile', component: Profile } → 实际访问地址是 /user/profile
• 错误写法：{ path: '/profile' ... } → 访问 /profile，和父路由无关
• 空 path 子路由很常用：{ path: '', component: UserDashboard } → 访问 /user 时默认显示它

三、嵌套路由的完整配置示例（Vue Router 4）

以用户中心为例：/user → 用户总览页；/user/profile → 个人资料；/user/settings → 设置页。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

立即学习“前端免费学习笔记（深入）”；

const routes = [
  {
    path: '/user',
    component: () => import('@/views/User.vue'),
    children: [
      { path: '', component: () => import('@/views/UserDashboard.vue') }, // /user
      { path: 'profile', component: () => import('@/views/Profile.vue') }, // /user/profile
      { path: 'settings', component: () => import('@/views/Settings.vue') } // /user/settings
    ]
  }
]

对应 User.vue 模板中要有：

<template>
  <div class="user-layout">
    <nav>
      <router-link to="/user">首页</router-link>
      <router-link to="/user/profile">资料</router-link>
      <router-link to="/user/settings">设置</router-link>
    </nav>
    <main>
      <router-view></router-view> <!-- 子组件渲染在这里 -->
    </main>
  </div>
</template>

四、进阶技巧：命名视图 + 多个 router-view

如果子页面需要同时展示多个区域（比如左侧菜单+右侧内容），可以用 命名视图，配合 components 配置。

• 在父组件中写：<router-view name="sidebar"></router-view> 和 <router-view name="main"></router-view>
• 子路由配置：{ components: { sidebar: Sidebar, main: UserProfile } }
• 适合后台系统等复杂布局，但日常嵌套用默认 <router-view></router-view> 就够了

不复杂但容易忽略：嵌套的关键不在“怎么写”，而在于“谁渲染谁”——父组件提供容器，子路由提供内容，children 建立连接，三者缺一不可。