如何根据 API 获取的内容创建列表 + 详细信息页面

Question

我的 nuxt 项目遇到问题。

当我使用 nuxt-link 路由页面时，它不会在我的页面中呈现组件，我猜这不是在进行 fetch 调用。

但是当我使用正常的 href 链接时，我的页面工作正常。一切就绪。

这是博客列表页面组件中的链接

//博客列表页sn-p

<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 路由而不是渲染组件，而是通过正常的 a 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>

Answer 1

因此，由于您的 API 需要一些 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 无关。根据您的后端，快速 google 搜索可能会为您提供大量结果。