我在写vue3App首页导航组件时，需要用到嵌套路由，跟基础的路由类似，用处在于实现组件内局部视图的无刷新更新，想了想还有一些使用场景例如后台管理系统侧边栏、多模块组件内的分栏等等，故在学习总结后记录下一些用法还有注意事项以备忘。
首先是基础结构配置，重点在于为父路由添加
children属性（子路由数组），父路由需指定承载子路由的组件，子路由通过path定义相对 / 绝对路径，component指定渲染组件：import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
// 父组件（承载子路由的容器）
import ParentContainer from '../views/ParentContainer.vue'
// 子路由组件
import ChildHome from '../views/child/ChildHome.vue'
import ChildDetail from '../views/child/ChildDetail.vue'
const routes: RouteRecordRaw[] = [
// 父路由
{
path: '/parent', // 父路由路径
name: 'Parent', // 唯一命名，避免冲突
component: ParentContainer, // 父容器组件
meta: { title: '父容器' }, // 元信息（可选）
// 子路由数组
children: [
// 默认子路由：访问/parent时自动跳转到/parent/home
{
path: '', // 空路径表示父路由默认子路由
redirect: '/parent/home' // 重定向到具体子路由，避免空白
},
// 子路由1：相对路径（无/开头，拼接父路由path为/parent/home）
{
path: 'home',
name: 'ChildHome',
component: ChildHome,
meta: { title: '子路由首页' }
},
// 子路由2：带参数的子路由
{
path: 'detail/:id',
name: 'ChildDetail',
component: ChildDetail,
meta: { title: '子路由详情' }
}
]
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
linkActiveClass: 'active' // 激活导航的样式类
})注意事项：子路由path无/开头：为相对路径，最终路径为 “父路由 path + 子路由 path”（如上述home最终为/parent/home）；
子路由path以/开头：为绝对路径，直接匹配根路径；
挂载子路由：
与基础的路由挂载类似，父路由组件必须通过
<router-view />指定子路由的挂载位置，这是嵌套路由生效的核心前提，同时需做好布局与样式适配：<!-- ParentContainer.vue（父容器组件） -->
<template>
<div class="parent-container">
<!-- 父容器固定内容（如导航栏、标题） -->
<div class="parent-header">父容器头部导航</div>
<!-- 子路由挂载出口：子路由组件将渲染在此处 -->
<router-view />
</div>
</template>
<style scoped>
.parent-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.parent-header {
height: 50px; /* 固定头部高度 */
line-height: 50px;
background: #fff;
}
/* 子路由出口占满剩余高度，开启滚动避免内容溢出 */
router-view {
flex: 1;
overflow-y: auto;
background: #f9f9f9;
}
</style> 注意事项：嵌套层级与
<router-view />一一对应，若存在多层嵌套（如子路由下还有孙路由），则子路由组件内也需添加<router-view />。导航链路的配置与跳转：
子路由的导航跳转分为模板层（
<router-link>）和逻辑层（$router.push）两种方式，需保证路径准确性：模板层导航（优先）：
<!-- 父容器组件内的导航 -->
<template>
<div class="nav">
<!-- 绝对路径跳转（推荐，避免路径层级混乱） -->
<router-link to="/parent/home" active-class="active">首页</router-link>
<router-link :to="`/parent/detail/${id}`" active-class="active">详情</router-link>
<!-- 相对路径跳转（相对于当前父路由） -->
<router-link to="home">首页（相对路径）</router-link>
</div>
</template>
逻辑层跳转：
import { useRouter } from 'vue-router'
const router = useRouter()
// 方式1：通过路径跳转（绝对路径）
const goToDetail = (id: number) => {
router.push(`/parent/detail/${id}`)
}
// 方式2：通过name跳转（更稳定，路径变化时无需修改）
const goToHome = () => {
router.push({ name: 'ChildHome' })
}
总结注意事项：父容器必须明确高度（如 100%、固定像素、flex 占比），否则<router-view />可能因高度为 0 导致子路由内容不可见。
子路由内容若包含长列表，需为<router-view />设置overflow-y: auto，避免超出父容器范围；
子路由路径避免与父路由路径前缀重复（如父路由/user，子路由避免写/userinfo，应写info作为相对路径）；
