如何通过NuxtLink向[slug].vue组件传递产品对象数据

你可以通过Nuxt3的路由state机制来传递产品对象，这部分数据不会出现在URL中，仅在客户端跳转时保留，完全符合你的需求：

1. 首页跳转时传递产品数据 #

修改首页的NuxtLink，通过to对象的state字段携带完整产品对象：

<NuxtLink 
  :to="{
    name: 'slug', // 对应[slug].vue的路由名称，可通过`nuxi show routes`命令查看
    params: { slug: product.slug },
    state: { product: product } // 这里传递完整产品对象
  }"
>
  {{ product.title }}
</NuxtLink>

注意：路由名称name需要和你的[slug].vue实际路由名一致，默认情况下是slug，可以通过nuxi show routes命令确认。

2. 详情页接收并使用传递的数据 #

在[slug].vue中，通过useRoute()获取路由state中的产品数据，结合你已有的判断逻辑：

<script setup>
const route = useRoute()
const props = defineProps({
  product: {
    type: Object,
    default: null
  }
})

// 优先使用路由state传递的产品数据，其次是props，最后调用API
let productData = route.state?.product || props.product

if (!productData) {
  // 直接访问详情页时，调用API获取数据
  const { data } = await useFetch(`/api/products/${route.params.slug}`)
  productData = data.value
}

// 后续业务逻辑使用productData即可
</script>

原理说明 #

• Nuxt3的路由state是客户端跳转时的临时内存状态，不会被序列化到URL，也不会在页面刷新后保留，刚好匹配你的场景：从首页跳转时复用已有数据，直接访问/刷新时自动走API。
• 这种方式不需要依赖状态管理工具，也不会污染URL，完全基于Nuxt的原生路由能力实现。

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