嵌套路由是电商商品详情页多标签切换的规范方案，通过/goods/:id父路由承载上下文，子路由如/info、/specs等复用布局并保持URL语义清晰，支持缓存与浏览器导航。
电商后台商品详情页常需在单个页面内组织多个功能模块，比如基础信息、规格参数、商品评价、物流设置等。用嵌套路由实现多标签切换，既能保持 URL 语义清晰（如 /goods/123/info、/goods/123/specs），又能复用布局、避免整页刷新，是比纯组件内 v-if 切换更规范、可维护性更强的方案。
1. 路由结构设计：父路径承载商品上下文
把商品 ID 作为动态参数挂载在父级路由上，所有子标签页都基于该上下文展开：
-
/goods/:id —— 父路由，对应
GoodsDetailLayout.vue，负责渲染通用头部、商品概览栏和标签导航 -
/goods/:id/info —— 子路由，加载
GoodsInfo.vue -
/goods/:id/specs —— 子路由，加载
GoodsSpecs.vue -
/goods/:id/reviews —— 子路由，加载
GoodsReviews.vue -
/goods/:id/logistics —— 子路由，加载
GoodsLogistics.vue
注意：子路由的 path 是相对路径（不加斜杠开头），且必须在父路由的 children 数组中声明。
2. 布局组件中嵌套
GoodsDetailLayout.vue 是核心容器，它需要包含两部分：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 固定区域：商品 ID 标题、返回按钮、顶部标签栏（用
- 动态区域：一个
示例片段：
商品 #{{ $route.params.id }}
3. 路由配置写法：children + 动态参数继承
在 router/index.js 中，父路由需显式声明 props: true 或使用函数模式，确保子组件能接收到 :id 参数：
{
path: '/goods/:id',
name: 'GoodsDetail',
component: () => import('@/views/GoodsDetailLayout.vue'),
props: true, // 自动将 params 注入组件
children: [
{ path: '', redirect: 'info' }, // 默认打开基础信息页
{ path: 'info', component: () => import('@/views/GoodsInfo.vue') },
{ path: 'specs', component: () => import('@/views/GoodsSpecs.vue') },
{ path: 'reviews', component: () => import('@/views/GoodsReviews.vue') },
{ path: 'logistics', component: () => import('@/views/GoodsLogistics.vue') }
]
}
]
4. 子组件获取商品数据：复用 ID，按需加载
每个子组件（如 GoodsInfo.vue）无需重复请求商品主数据。可在父组件 GoodsDetailLayout.vue 的 setup 中统一拉取，并通过 provide/inject 或 Vuex/Pinia 共享；或直接在子组件中监听 $route.params.id 变化，调用对应 API：
- 用
watch监听$route.params.id，ID 变则重新 fetch 当前标签所需数据 - 对高频访问的子页（如 info），可配合
- URL 改变时，浏览器前进/后退仍能精准定位到对应标签页，利于操作回溯
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
