我有下面的vue3模板文件，从Strapi获取数据。它可以在我的本地机器上运行，但当我在线运行它时，内容只在第一页加载时加载，当我改变页面时不会改变（这一切都是用一个动态页面设置的）。如果我刷新页面，将加载正确的内容。URL也会正确更改。
<template>
<div v-if="!pending">
{{ route.params.slug }}
<div v-if="project.data[0]">
<Head>
<Title
>{{ project.data[0].attributes.title }} / Tuomoas Markunpoika</Title
>
</Head>
<div id="hero">
<img
:src="`${config.public.strapiURL}${project.data[0].attributes.preview.image.data.attributes.url}`"
/>
</div>
<ContentBlocks :blocks="project.data[0].attributes.content" />
<h2 v-if="project.data[0].attributes.items.data.length" class="main-heading">
Collection
</h2>
<ItemGrid v-if="project.data[0].attributes.items.data.length" :overview="`projects`" :selection="`${route.params.slug}`" />
</div>
</div>
</template>
<script setup>
const route = useRoute()
const config = useRuntimeConfig()
const { data: project, pending } = await useAsyncData("project", () =>
$fetch(
`${config.public.strapiURL}/api/projects/?filters[slug][$eq]=${route.params.slug}&populate[meta][populate]=*&populate[preview][populate]=*&populate[content][populate]=*&populate[items]=*`
)
)
if (!project.value || Object.keys(project.value.data).length === 0) {
throw createError({ statusCode: 404, statusMessage: "Page Not Found" })
}
</script>
1条答案
按热度按时间ddrv8njm1#
您希望使用一个在参数更改时重新请求数据的监视器。所以在你的例子中可以是这样的：
更多信息：访问路由器和当前路由设置