Vue嵌套/子路由传参求助：课程组件跳转详情页失败

方案一：修复router.push传参问题 #

你当前用path配合params的方式无效，Vue Router中使用path时，params参数会被直接忽略，改成以下两种方式之一即可：

方式1：直接拼接ID到路径中 #

修改Course组件的showDetails方法：

const showDetails = () => {
  router.push(`/details/${props.course.id}`)
}

同时确保路由配置里有对应的详情页路由：

{
  path: '/details/:id',
  component: () => import('../views/CourseDetail.vue'),
}

方式2：使用路由名称配合params #

先给详情页路由定义name：

{
  path: '/details/:id',
  name: 'CourseDetail',
  component: () => import('../views/CourseDetail.vue'),
}

再修改Course组件的跳转逻辑：

const showDetails = () => {
  router.push({ name: 'CourseDetail', params: { id: props.course.id } })
}

详情组件获取ID #

在CourseDetail组件中，通过useRoute拿到传递的ID：

import { useRoute } from 'vue-router'

const route = useRoute()
// 拿到的参数是字符串，需要数字的话可以转类型
const courseId = Number(route.params.id)

方案二：修复嵌套路由配置 #

你的嵌套路由有两个核心问题：

1. 子路由的path不能以/开头，否则会被识别为根路径路由，而非父路由的子路由
2. 父组件Courses.vue中缺少<router-view>标签，子路由组件没有渲染入口

步骤1：修正路由配置 #

{
  path: '/courses',
  meta: { title: 'Courses' },
  component: () => import('../views/Courses.vue'),
  children: [
    {
      // 去掉开头的/，使用相对路径
      path: 'details/:id',
      component: () => import('../views/CourseDetail.vue'),
    }
  ]
},

步骤2：在Courses组件中添加router-view #

修改Courses.vue的模板，加入<router-view>作为子组件的渲染容器（可以根据布局需求调整位置）：

<template>
  <div class="flex grid-cols-2 justify-start">
    <div class="">
      <Filter/>
    </div>
    <div class="grid grid-cols-2 h-4 md:w-4/5 p-4">
      <div class="md:grid-cols-2 lg:grid-cols-1 col-gap-2 md:col-gap-8 md:row-gap-10" v-for='course in courses'>
        <Course :key="course.id" :course="course"/>
      </div>
    </div>
    <!-- 子路由组件会在这里渲染 -->
    <router-view></router-view>
  </div>
</template>

步骤3：修改跳转逻辑 #

嵌套路由的跳转路径应为/courses/details/:id，可以用相对路径简化写法：

const showDetails = () => {
  router.push(`details/${props.course.id}`)
}

内容的提问来源于stack exchange，提问作者Mike3355