能否在Nuxt 3中为单个组件配置多个路由参数？

当然有办法实现你要的多参数路由结构，给你两种实用方案：

方案一：用捕获所有路由（Catch-all Route） #

在pages目录下创建compare/[...productIds].vue组件，这个文件会匹配所有以/compare/开头的路径。

在组件里可以这样获取所有productId参数：

<script setup>
const route = useRoute()
// 把参数转为数组，兼容单个参数的情况
const productIds = Array.isArray(route.params.productIds) 
  ? route.params.productIds 
  : [route.params.productIds]

// 限制最多4个商品ID，超出的部分可以忽略或者提示用户
const validProductIds = productIds.slice(0, 4)
</script>

这种方式的好处是灵活，不管用户传几个ID都能捕获，你只需要在逻辑里限制数量即可。

方案二：自定义路由规则（适合固定数量参数） #

如果确定最多只需要4个商品ID，可以直接自定义路由规则，明确指定每个参数。

在项目根目录创建app/router.options.ts（Nuxt 3.4+支持），写入以下内容：

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig>{
  routes: (_routes) => [
    // 保留原有路由，添加自定义的对比页路由
    ..._routes,
    {
      path: '/compare/:id1/:id2?/:id3?/:id4?',
      // 指定对应的组件路径
      component: () => import('~/pages/compare.vue'),
    }
  ]
}

然后在pages/compare.vue里直接获取单个参数：

<script setup>
const route = useRoute()
const { id1, id2, id3, id4 } = route.params
// 注意可选参数可能为undefined，需要做非空处理
const productIds = [id1, id2, id3, id4].filter(Boolean)
</script>

这种方式路由结构更清晰，参数一目了然，适合你明确最多4个ID的场景。

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