通过 nuxt-link 将动态对象数据传递到组件

Question

我有一个在 Nuxt 3 中构建的项目，其主页显示产品。在该主页上，您可以单击产品标题，然后打开产品详细信息页面。我使用

<NuxtLink>

存档此内容

<NuxtLink :to="{ name: 'slug', params: { slug: product.slug }}">
    <p>{{ product.title }}</p>
</NuxtLink>

当用户单击该链接时，

[slug].vue

组件将显示产品详细信息页面。到目前为止，一切都很好。但是，这会导致

[slug].vue

组件再次使用其 slug 从 API 获取产品数据，如下所示：

const { data } = await useFetch(runtimeConfig.public.api.product.view + `/${slug}`);

当用户直接从他看到的链接访问产品详细信息页面时，也需要这种行为。 Facebook 等。但是当用户从主页单击

<NuxtLink>

时，我想将我的产品对象传递给

[slug].vue

组件，因为主页已经具有

[slug].vue

组件所需的有关产品的所有所需信息渲染。

如果我能够将我的产品对象传递给

[slug].vue

组件，我就可以跳过额外的 API 获取并立即向用户呈现数据，从而提高页面速度和用户体验。

我已经在我的

[slug].vue

组件中编写了所需的必要代码，以确定 props 是否为空，以及组件是否需要从 API 获取它们，或者组件可以只使用传递的 props 并跳过获取：

<script setup lang="ts">
  const { slug } = useRoute().params;
  const runtimeConfig = useRuntimeConfig()
  const route = useRoute()

  // Define component props
  const props = defineProps({
    product: null
  });

  // Computed property to determine whether data needs to be fetched
  const fetchData = computed(() => {
    return !props.product; // If props.data is not provided, fetch data
  });

  // Data ref to store fetched data
  const product = ref(null);

  // Fetch data from the API if fetchData is true
  if (fetchData.value) {
    const { data } = await useFetch(runtimeConfig.public.api.product.view + `/${slug}`);
    product.value = data.value;
  }
</script>

但是，我无法将产品对象从

<NuxtLink>

传递到

[slug].vue

组件的 props。我怎样才能存档？

我不想使用

[slug].vue

将我的产品对象从我的主页传递到我的

params

组件。这不起作用，因为产品对象很长。我可以用

JSON.stringify()

对其进行字符串化，但我也不想通过 URL 传递数据（除了 slug）。此外，向其传递一个非常长的

JSON

字符串，该 URL 也会看起来非常难看。

我也不想使用像 Pinia 这样的存储。我想利用可用的

props

功能，该功能是为了在组件之间传递数据而构建的。

如果您有任何其他想法，如何将数据从主页传递到我的

[slug].vue

组件，请告诉我。

亲切的问候

Answer 1

<NuxtLink>

只是一个路由器链接。您将无法通过它为下一页传递数据。
但是您可以在

store

上的

localStorage

之后保存此数据，例如在某些

@click

或

<NuxtLink>

中，并在下一个视图中处理它。