Nuxt3动态路由场景下如何通过slug获取对应数据

针对你遇到的场景，不用Pinia存ID的话，有几个更合适的常规解决方案：

1. 路由参数同时携带ID和Slug #

把ID和Slug一起作为路由参数传入，Nuxt3支持在路由参数中传递多个值。

修改你的NuxtLink代码：

<NuxtLink 
  class="catalog-item" 
  :to="{ 
    name: 'catalog-slug', // 对应pages/catalog/[slug].vue的路由名称
    params: { slug: slug, id: item.id } 
  }"
></NuxtLink>

然后在目标组件（pages/catalog/[slug].vue）中获取ID：

const route = useRoute()
const targetId = route.params.id // 直接拿到对应的ID，再用它查找数组元素

注：路由名称可以通过nuxi show routes命令查看，确保和你的页面文件对应。

2. 通过Slug反向匹配ID #

如果你的Slug是从元素的某个字段（比如标题、名称）生成的，在目标组件中可以用相同的生成逻辑反向匹配到对应元素的ID。

假设你生成Slug的函数是generateSlug，目标组件中的代码：

const route = useRoute()
const targetSlug = route.params.slug
// 假设你的数组数据是从API或本地获取的
const catalogItems = await useAsyncData('catalog-items', () => fetchCatalogItems())

// 用Slug匹配对应的元素
const targetItem = catalogItems.value.find(item => generateSlug(item.title) === targetSlug)
const targetId = targetItem?.id

这种方案的关键是保证Slug生成逻辑前后一致，避免出现匹配失败的情况。

3. 使用路由查询参数传递ID #

最简单的方式是把ID作为查询参数附加到URL上，不需要修改路由配置：

修改NuxtLink：

<NuxtLink 
  class="catalog-item" 
  :to="`catalog/${slug}?id=${item.id}`"
></NuxtLink>

目标组件中获取ID：

const route = useRoute()
const targetId = route.query.id // 从查询参数中拿到ID

这种方式的缺点是URL会显示?id=xxx，但实现成本最低，适合对URL美观度要求不高的场景。

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