刷新后参数不起作用答案

【问题标题】：Params do not work after refresh刷新后参数不起作用
【发布时间】：2018-11-06 11:10:55
【问题描述】：

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

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

这是博客详情页面的链接。

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

它运行良好，但是在我刷新详细信息页面（即：tech/hello-world）后，它返回 Cannot read property '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>

我认为异步数据有问题。为什么会这样？

【问题讨论】：

你检查过 res.data 吗？
@RicoChen 是的，我做到了。 res.data 给了我正确的响应，但正如我上面提到的，当我点击 nuxt-link 但刷新页面后，我得到了错误。
您是否按照the documentation 为data() 中的loadedPost 设置了默认值？
@Flaex 我认为原因与github.com/nuxt/nuxt.js/issues/945 类似，可能的解决方案之一是github.com/nuxt/nuxt.js/issues/1636

标签： javascript vue.js nuxt.js

【解决方案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 为空，这就是您收到该错误的原因。

【讨论】：

【解决方案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）

【讨论】：