Question

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

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

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

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

它运作良好但在刷新详细信息页面（即：tech / hello-world）后，它返回无法读取属性＆＃39;作者＆＃39;为null

_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>

我认为asyncdata存在问题。为什么会这样？

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时，loadedPost.author为空，这就是您收到错误的原因。

Answer 2

感谢您的回答。这是解决方案。当用户点击下面的按钮时，_slug.vue只获取params.id。

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

当用户直接输入此网址或刷新页面时，将没有params.id。所以我需要通过“slug”来获取数据。

感谢Firebase：

return axios.get('https://howto-a9089.firebaseio.com/posts.json?orderBy="slug"&equalTo=' + '"' + params.slug + '"' + '&print=pretty')

结果：我现在获得了SEO友好网址。：）（即url.com/tech/hello-world）

刷新后，参数不起作用

2 个答案: