Vue 3中vue-router如何传递多路由参数？遇Slug未定义问题

你的问题出在路由配置没有包含slug参数，且props: true只会把URL路径中定义的参数映射为组件props，所以即使你在RouterLink里传了slug，组件也拿不到。

要实现「URL显示slug、用id调用API」的需求，分两种场景处理：

场景1：仅支持单页内跳转（刷新页面会丢失id） #

这种方式适合不需要用户直接输入URL访问详情页的场景：

1. 修改路由配置：
   把路径改为/movies/:slug（让URL显示slug），同时用props的函数模式，手动传递id和slug参数：

   {
     path: '/movies/:slug',
     name: 'movie-details',
     component: MovieDetailsView,
     props: route => ({
       id: route.params.id,
       slug: route.params.slug
     })
   }
   

2. 保持RouterLink的代码不变：

   <RouterLink :to="{ name: 'movie-details', params: { id: movie.id, slug: movie.slug } }" class="link">
   

3. 组件接收props的代码也不变：

   const props = defineProps(['id','slug'])
   

⚠️ 注意：这种方式下，刷新页面后route.params.id会丢失，因为URL里只有slug，无法恢复id，导致无法调用API。

场景2：支持刷新页面（推荐） #

如果需要用户直接输入URL也能正常访问，必须通过slug获取到对应的id，这需要后端配合：

1. 让后端提供一个通过slug查询电影数据（或查询对应id）的接口，比如GET /api/movies/by-slug/:slug。

2. 修改路由配置：
   路径只保留slug，props: true自动传递slug参数：

   {
     path: '/movies/:slug',
     name: 'movie-details',
     component: MovieDetailsView,
     props: true
   }
   

3. 简化RouterLink的代码，只传slug：

   <RouterLink :to="{ name: 'movie-details', params: { slug: movie.slug } }" class="link">
   

4. 组件内先通过slug获取id，再调用原API：

   import { onMounted } from 'vue'
   
   const props = defineProps(['slug'])
   
   onMounted(async () => {
     // 第一步：通过slug获取电影id（或直接获取电影详情）
     const slugRes = await fetch(`/api/movies/by-slug/${props.slug}`)
     const movieData = await slugRes.json()
     const movieId = movieData.id // 如果接口直接返回详情，就不用这一步
   
     // 第二步：用id调用原API获取完整数据
     const detailRes = await fetch(`/api/movies/${movieId}`)
     const detailData = await detailRes.json()
   
     // 处理并渲染详情数据
   })
   

为什么你之前的slug是undefined？ #

原来的路由路径是/movies/:id，只有id是URL路径参数，slug不属于路径参数，props: true只会把路径中定义的参数映射为组件props，所以即使你传了slug，也不会被传递到组件中，自然是undefined。

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