刷新后参数不起作用

Question

编辑：我无法获得 params.id 因为 nuxt-link 将它传递到详细信息页面。

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

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

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

它运行良好，但在我刷新详细信息页面后（即：tech/hello-world），它returns 无法读取属性 'author' of 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.author 时，loadedPost 为空，这就是您收到该错误的原因。

Answer 2

感谢您的回答。这是解决方案。 _slug.vue 只有当用户点击下面的按钮时才会得到 params.id。

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

当用户直接输入此url或刷新页面时，不会有params.id。所以我需要通过 "slug".

获取数据

感谢 Firebase：

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

结果：我现在对 SEO 友好 url。 :)（即 url.com/tech/hello-world）

刷新后参数不起作用

Params do not work after refresh

javascript

vue.js

nuxt.js