https://blog.csdn.net/XZZXBC/article/details/149041831?spm=1001.2014.3001.5502

在这篇笔记中，我们提到搭建前端项目时，需要配置路由，但当时只说明了安装、使用，没有详细说明子路由的用法。

在本文中，我们将围绕子路由展开

1.核心概念

子路由本质是路由的嵌套关系

• 父路由：包含子路由的外层路由（如 /user）
• 子路由：依赖父路由存在的内层路由（如 /user/profile、/user/settings）
• 渲染位置：父组件的 <router-view> 是子组件的 “容器”

2.使用场景

适用于页面存在明显的层级结构时

• 导航（父组件）+ 主体内容区（子组件，随路由切换）
• 主页（父组件）包含个人信息子页面
• 组件嵌套：如 /article/123（文章详情父组件）包含 /article/123/comments（评论子组件）

3.使用说明

以 Vue Router 4 为例：

<!-- 父组件 -->
<template>
  <div class="user-container">
    <h2>用户中心</h2>
    <nav>
      <router-link to="profile">个人资料</router-link> |
      <router-link to="settings">设置</router-link>
    </nav>
    <!-- 子组件渲染容器 -->
    <router-view></router-view>
  </div>
</template>

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import User from '../views/User.vue' // 父组件
import UserProfile from '../views/UserProfile.vue' // 子组件1
import UserSettings from '../views/UserSettings.vue' // 子组件2

const routes = [
  {
    path: '/user', // 父路由路径
    component: User, // 父组件
    // 子路由配置
    children: [
      {
        path: 'profile', 
        component: UserProfile // 子组件1
      },
      {
        path: '/settings',
        component: UserSettings // 子组件2
      },
      {
        // 子路由默认页：当访问 /user 时，默认渲染该组件
        path: '', 
        redirect: 'profile' // 或直接写 component: 默认组件
      }
    ]
  }
]

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

export default router

注意：

• 父组件中的 <router-link> 跳转子路由时，to 属性可以直接写子路由的相对路径(如 to="profile")，会自动拼接父路由路径。
• 我们还可以通过 children 继续深层嵌套。
• 子路由的导航守卫（如 beforeEnter）会在父路由守卫之后执行，退出时先执行子路由的离开守卫。
• 父路由的参数（如 /user/:id）可以在子路由中通过 $route.params 访问。
• 细心的同学可以发现，我在定义两个子组件的path的时候，一个写了'profile'，一个写了'/settings'，这有什么区别呢？

        子路由路径若以 / 开头，则为绝对路径，会脱离父路由；不以 / 开头，则自动拼接父路由路径。比如依据我现在的定义，我需要这样写路由来访问两个组件：

        访问 /user/profile，父组件 User 渲染，同时子组件 UserProfile 渲染到父组件的 <router-view> 中。访问 /user/settings 时，不会展示内容，只有访问 /settings 时，子组件切换为 UserSettings。