如何根据API拉取的内容创建列表+明细页面
如何根据API拉取的内容创建列表+明细页面
提问于 2021-05-11 21:15:11
我在我的核项目中遇到了一个问题。
当我使用nuxt-link路由页面时，它不会在我的页面中呈现组件，我猜这不是在进行fetch调用。
但是当我使用普通的a href链接时，我的页面工作得很好。一切都就位了。
下面是博客列表页面组件中的链接
//博客列表页面片段
<template>
<div>
<div v-for="blog in blogs.response.posts" :key="blog.id" class="col-md-3">
<nuxt-link :to="`/blogs/${blog.id}`" class="theme-blog-item-link"> Click to View Blog </nuxt-link>
</div>
</div>
</template>
<script>
export default {
data() {
return {
blogs: [],
}
},
async fetch() {
this.blogs = await fetch('https://www.happyvoyaging.com/api/blog/list?limit=4').then((res) => res.json())
},
}
</script>但是，如果我用href标记替换nuxt-link，就可以很好地工作
<a :href="`/blogs/${blog.id}`" class="theme-blog-item-link">
Click to View Details
</a>通过单击该链接，我想按给定的id查看博客的详细信息。这就是_id.vue，页面代码如下所示。
//这是具体的博客详情页面代码
<template>
<div class="theme-blog-post">
<div v-html="blogs.response.description" class="blogdesc"></div>
</div>
</template>
<script>
export default {
data(){
return {
blogs: []
}
},
async fetch() {
const blogid = this.$route.params.id
this.blogs = await fetch('https://www.happyvoyaging.com/api/blog/detail?id='+blogid+'').then((res) => res.json())
},
}
</script>问题出在blogdetails页面上，通过nuxt-link路由不会呈现组件，但通过正常的href链接可以很好地工作。
我在控制台中收到此错误
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <PageNotFound> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Error> at layouts/error.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>Stack Overflow用户
回答已采纳
发布于 2021-05-12 00:16:21
因此，由于您的应用程序接口需要一些CORS配置，这里有一个使用JSONplaceholder API的简单解决方案。
test.vue，差不多就是你的博客列表
<template>
<div>
<div v-if="$fetchState.pending">Fetching data...</div>
<div v-else>
<div v-for="item in items" :key="item.id">
<nuxt-link :to="`/details/${item.id}`"> View item #{{ item.id }}</nuxt-link>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
}
},
async fetch() {
const response = await fetch('https://jsonplaceholder.typicode.com/users')
this.items = await response.json()
},
}
</script>details.vue，这个文件需要放到pages/details/_id.vue文件中才能工作
<template>
<div>
<button @click="$router.push('/test')">Go back to list</button>
<br />
<br />
<div v-if="$fetchState.pending">Fetching details...</div>
<div v-else>{{ details.email }}</div>
</div>
</template>
<script>
export default {
data() {
return {
details: {},
}
},
async fetch() {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${this.$route.params.id}`)
this.details = await response.json()
},
}
</script>如您所见，为了保持一致性和清晰度，我在这里只使用了async/await，没有使用then。
尝试此示例，然后参阅修复CORS问题。后者仅用于后端，与Nuxt无关。一个快速的谷歌搜索可能会给你大量的结果，这取决于你的后端。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67487535
复制相关文章
相似问题
腾讯云开发者
