javascript - 使用 nuxt-link 路由时未定义的响应

Question

我正在使用 Axios asyncData 函数为我的 Nuxt 应用程序获取数据，每当我使用 nuxt-links 浏览页面时，我都会收到错误“未定义的 slug”。如果我然后重新加载页面，它可以正常工作并加载数据。有任何想法吗？

_vue.vue

<template>
  <div>
     <div :v-if="post[0].slug">{{ post[0].slug }}</div>
  </div>
</template>

<script>
import axios from 'axios' 

export default {

  components: {
  },

  asyncData ({ params, error }) {
    return axios.get(`https://myurl.com/wp-json/wp/v2/pages?slug=${params.vue}`)
    .then((res) => {
      return { post: res.data }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}
</script>

布局中引用的标头组件

<ul class="menu">
 <li><nuxt-link to="/category1">Test 1</nuxt-link></li>
 <li><nuxt-link to="/category2">Test 2</nuxt-link></li>
 <li><nuxt-link to="/category3">Test 3</nuxt-link></li>
 <li><nuxt-link to="/category4">Test 4</nuxt-link></li>
</ul>

标签： javascripthtmlvue.jsnuxt.js