javascript - 刷新后参数不起作用

Question

编辑:我无法获取 params.id，因为 nuxt-link 将其传递到详细信息页面。

我正在尝试使用 NuxtJS 构建一个博客。

这是博客详细信息页面的链接。

<nuxt-link :to="{name: 'category-slug', params: { slug: slug, id: id, category: category } }">

它运行良好，但在我刷新详细信息页面(即:tech/hello-world)后，它返回无法读取 null 的属性“author”

_slug.vue

<template>
<div>
  <h1>slug {{ $route.params.id }}</h1>
  {{ loadedPost.author }}
  </div>
</template>

<script>
import Vuex from "vuex"
import axios from "axios"

export default {
    asyncData(context) {
      console.log(context.params.id)
      return axios.get('https://howto-a9089.firebaseio.com/posts/' + context.params.id + '.json')
        .then(res => {
          return {
            loadedPost: res.data
          }
        })

    },
  }
</script>

我认为异步数据有问题。为什么会发生这种情况？

Answer 1

根据 the documentation ，您应该为 loadedPost 设置默认值，这样在加载异步数据时就不会出现这样的错误

export default {
  data() {
    return { loadedPost: {} }
  },
  asyncData({ params }) {
    return axios.get(`https://howto-a9089.firebaseio.com/posts/${params.id}.json`)
        .then(res => ({
          loadedPost: res.data
        }))
  }
}

如果没有这个，当您的模板尝试显示 loadedPost.author 时，loadedPost 将为 null，这就是您收到该错误的原因。