嵌套路由是电商商品详情页多标签切换的规范方案，通过/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. 布局组件中嵌套 <router-view></router-view>

GoodsDetailLayout.vue 是核心容器，它需要包含两部分：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

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

• 固定区域：商品 ID 标题、返回按钮、顶部标签栏（用 <router-link></router-link> 指向各子路径）
• 动态区域：一个 <router-view></router-view>，所有子组件将在此处按需渲染

示例片段：

3. 路由配置写法：children + 动态参数继承

在 router/index.js 中，父路由需显式声明 props: true 或使用函数模式，确保子组件能接收到 :id 参数：

const routes = [
  {
    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），可配合 <keep-alive></keep-alive> 缓存，提升切换体验
• URL 改变时，浏览器前进/后退仍能精准定位到对应标签页，利于操作回溯