<router-view>是Vue嵌套路由中子组件渲染的必需出口，需在父组件模板中显式声明，并与路由配置的children严格对应；未声明则子组件不显示。

Vue 嵌套路由中，<router-view> 是子组件内容能被正确渲染的关键出口。它不是自动生效的“魔法标签”，而是需要在**父组件模板中显式声明**、并与路由配置中的 children 严格对应。

父组件必须包含 <router-view> 标签

嵌套路由不会自动把子组件塞进父组件任意位置。父组件（如 DashboardLayout.vue 或 Admin.vue）必须手动写一个 <router-view>，作为子路由组件的挂载点：

• 这个 <router-view> 通常放在父组件的内容区域，比如 <main> 或 <div class="content"> 内部
• 它不带任何属性时，渲染 children 中匹配的默认子路由（path: ''）或第一个匹配项
• 示例（DashboardLayout.vue）：

<template>
  <div class="dashboard-layout">
    <header>管理后台头部</header>
    <aside>侧边菜单</aside>
    <main>
      <router-view /> <!-- ✅ 子组件在此处动态替换 -->
    </main>
  </div>
</template>

路由配置要与 <router-view> 层级对齐

children 数组定义的是“谁能在父组件的 <router-view> 里显示”，路径是相对的，且依赖父路由已命中：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 父路由路径为 /admin，子路由 path: 'users' → 完整地址是 /admin/users
• 访问 /admin/users 时，Vue Router 先渲染 AdminLayout 组件，再把 UserList 渲染进它内部的 <router-view>
• 若父组件没写 <router-view>，子组件将完全不出现——控制台无报错，但页面留空

支持命名视图，实现多区域嵌套

一个父组件可设多个 <router-view name="xxx">，配合 components（注意是复数）实现更灵活布局：

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

• 例如：主内容区 + 右侧操作栏同时更新
• 路由配置写法：

{
  path: '/settings',
  component: SettingsLayout,
  children: [
    {
      path: '',
      components: {
        default: GeneralSettings,
        sidebar: SettingsSidebar
      }
    }
  ]
}

• 对应模板中需两个出口：<router-view /> 和 <router-view name="sidebar" />

跳转时路径写法要准确

无论是用 <router-link> 还是 this.$router.push()，目标路径必须能完整匹配嵌套结构：

• 推荐使用对象形式避免拼写错误：<router-link :to="{ path: '/admin/users' }">
• 相对路径在子组件内可用（如当前在 /admin，to="users" 会解析为 /admin/users），但不建议依赖，易出错
• 编程式导航中，router.push('/admin/logs') 会触发整个嵌套链重新匹配