Vue Router路由参数显示undefined问题排查求助

核心问题分析 #

1. 数组访问错误：quizcard是ref包裹的数组，你直接访问quizcard.id，但数组本身没有id属性，id是数组内每个对象的属性，所以这里拿到的必然是undefined。
2. 点击事件未传递当前项：点击方法没有接收v-for循环中的当前quiz实例，无法获取对应项的id。
3. 无效的key值：v-for的key用了quiz.name，但你的数据对象里没有name字段，会导致key无效，存在渲染隐患。

具体修复步骤 #

1. 修改模板的点击事件，传递当前quiz：

<li
  @click="navigateToQuiz(quiz)"
  v-for="quiz in quizcard"
  :key="quiz.id"
  class="col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow"
>

（同时把key改成quiz.id，保证唯一有效）

2. 修改脚本中的跳转方法，接收参数并使用正确的id：

const router = useRouter();
const navigateToQuiz = (quiz) => {
  router.push(`/quiz/${quiz.id}`);
};

const quizcard = ref([
  {
    id: 1,
  }
])

修改完成后，点击列表项时就能正确传递当前项的id，路由跳转后的URL参数会正常显示为对应数值，而非undefined。

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