- 首页
- 前端开发
- 如何根据 API 获取的内容创建列表 + 详细信息页面
如何根据 API 获取的内容创建列表 + 详细信息页面
[英] How to have list + details pages based on API fetched content
本文介绍了如何根据 API 获取的内容创建列表 + 详细信息页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的 nuxt 项目遇到问题.
当我使用 nuxt-link 路由页面时，它不会在我的页面中呈现组件，我猜这不是在进行 fetch 调用.
但是当我使用普通的 href 链接时，我的页面工作正常.一切就绪.
这是博客列表页面组件中的链接
//博客列表页面片段
<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">点击查看博客 </nuxt-link>
<脚本>导出默认{数据() {返回 {博客:[],}},异步获取(){this.blogs = await fetch('https://www.happyvoyaging.com/api/blog/list?limit=4').then((res) => res.json())},}
但是如果我用 href 标签替换 nuxt-link 就可以了
点击查看详情</a>
点击该链接，我想通过给定的 id 查看博客的详细信息.那是_id.vue，该页面的代码如下.
//这是具体的博客详情页代码
<div class="theme-blog-post"><div v-html="blogs.response.description";class="blogdesc"></div>
<脚本>导出默认{数据(){返回 {博客:[]}},异步获取(){const blogid = this.$route.params.idthis.blogs = await fetch('https://www.happyvoyaging.com/api/blog/detail?id='+blogid+'').then((res) => res.json())},}
问题出在 blogdetails 页面上，通过 nuxt-link 路由不渲染组件，而是通过普通的 href 链接，它工作正常
我在控制台中收到此错误
vue.runtime.esm.js?2b0e:619 [Vue 警告]:未知自定义元素:<PageNotFound>- 您是否正确注册了组件?对于递归组件，请确保提供名称"；选项.在发现---><错误>在布局/error.vue<Nuxt><Layouts/default.vue>在 layouts/default.vue<根>
解决方案
因此，由于您的 API 需要一些 CORS 配置，因此这里有一个带有 JSONplaceholder API.
test.vue，几乎就是你案例中的博客列表
<div><div v-if="$fetchState.pending">正在获取数据...</div><div v-else><div v-for=项目中的项目":key="item.id"><nuxt-link :to="`/details/${item.id}`">查看项目 #{{ item.id }}</nuxt-link>
<脚本>导出默认{数据() {返回 {项目: []，}},异步获取(){const response = await fetch('https://jsonplaceholder.typicode.com/users')this.items = 等待 response.json()},}
details.vue，这个需要进入pages/details/_id.vue文件才能工作
<div><button @click="$router.push('/test')">返回列表</button><br/><br/><div v-if="$fetchState.pending">正在获取详细信息...</div><div v-else>{{ details.email }}</div><脚本>导出默认{数据() {返回 {细节: {}，}},异步获取(){const response = await fetch(`https://jsonplaceholder.typicode.com/users/${this.$route.params.id}`)this.details = 等待 response.json()},}
如您所见，为了一致性和清晰度，我在这里只使用了 async/await 而没有使用 then.
试试这个例子，然后查看解决 CORS 问题的方法.后者只是后端，与 Nuxt 无关.根据您的后端，快速的谷歌搜索可能会为您提供大量结果.
I am facing a issue in my nuxt projct.
when i route the page by using nuxt-link, it doesn't render component in my page, i guess this is not making fetch call.
but when i use normal a href link, my page is working fine. everything is in place.
here is the link in a blog listing page component
// blog listing page snippet
<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>
but this works fine with if i replace nuxt-link with a href tag
<a :href="`/blogs/${blog.id}`" class="theme-blog-item-link">
Click to View Details
</a>
By click to that link, i want to view the detail of the blog by given id. that is _id.vue, code for that page is below.
//This is Specific Blog Details page code
<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>
problem is on blogdetails page, where routing through nuxt-link not rendering the components but by normal a href link, it works fine
I am getting this error in console
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>
解决方案
So, since your API requires some CORS configuration, here is a simple solution with the JSONplaceholder API.
test.vue, pretty much the blog listing in your case
<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, this one needs to be into a pages/details/_id.vue file to work
<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>
As you can see, I do only use async/await here and no then for consistency and clarity.
Try this example, then see for fixing the CORS issue. The latter is backend only and not anyhow related to Nuxt. A quick google search may give you plenty of results depending of your backend.
这篇关于如何根据 API 获取的内容创建列表 + 详细信息页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
