Question

我正在使用一个blog.json文件构建一个简单的Nuxt JS博客，该文件包含一系列博客文章，其中包含：

标题（字符串）
正文（HTML标记）
创作（日期）

我将尽快附上该格式。我知道如何遍历每个数组项并将其显示在页面上，并且我对dynamic routing in Nuxt JS有基本的了解和一些基本的经验。

我当前面临的问题是我需要能够访问单个数组项并将其用作博客文章，例如：pages/blog/_slug，其中_slug是博客文章的标题，带有连字符+所有小写字母。

我想知道如何在示例中访问冬季博客帖子，并能够使用以下JSON格式访问mysite.com/blog/winter-blog-post：

{
  "blogs": [
    {
      "title": "Summer blog post",
      "body": "<div class=\"post\">My blog content</div>",
      "created": "2019-03-14 10:08:00"
    }
    {
      "title": "Winter blog post",
      "body": "<div class=\"post\">My blog content</div>",
      "created": "2019-03-15 10:08:00"
    },
    {
      "title": "Spring blog post",
      "body": "<div class=\"post\">My blog content</div>",
      "created": "2019-03-16 10:08:00"
    }
  ]
}

我本质上希望能够转到mysite.com/blog/winter-blog-post并使其使用该特定数组项中的内容。

Answer 1

我假设您的页面设置正确并且可以访问/blog/_slug，所以这实际上只是传递所需的参数并根据需要进行转换的问题。在blog.vue中，您将有一个帖子列表，单击某些内容将导航到全文。该click事件将触发一种方法，您可以在其中操纵标题并将其用作参数。因此，如果您有一个“阅读更多...”按钮，则可以为该按钮分配@click="readMore(blog.title)"。

然后在您的方法中，采用传递的“ title”参数，根据需要对其进行更改，然后触发路线更改。

methods: {
  readeMore(title) {
    let passedTitle = title.toLowerCase()
    passedTitle = passedTitle.replace(" ", "-")
    this.$router.push('/blog/' + passedTitle)
  }
}

然后在_slug.vue中，获取传递的参数，将其改回并用于查找文章。

export default {
     asyncData({params, $axios }) {
      let title = params.passedTitle.replace("-", " ")
      let oldTitle = title.charAt(0).toUpperCase() + title.slice(1)
        // make your query however you do, if with axios...
        $axios.get('/posts', {
          params: {
            title: oldTitle
          }
        })
    //or if its a vuex state item...
    //let post = this.$store.state.posts.find((p) => p.title === oldTitle)
      return post
    },
}

访问单个JSON数组项并动态用于博客文章

1 个答案: