jtk

WordPress + Nuxt.js で スラッグベースのパーマリンクにルーティングする

ルーティングする という表現があっているのかどうか微妙ですが、
カスタム投稿タイプを使ったWordPressの投稿をIDベースではなくスラッグベースで実装する場合

f:id:jotaki:20190924093802p:plain

カスタム投稿: book
.vue ファイル名: /pages/book/_slug.vue
実現したいURL構造: https://hoge.com/book/[スラッグ名]

<template>
  <section>
    <pre>{{post[0]}}</pre>
    <p>id: {{post[0].id}}</p>
    <p>slug: {{post[0].slug}}</p>
    <p>date: {{post[0].date}}</p>
    <p>link: {{post[0].link}}</p>
    <h1>{{post[0].title.rendered}}</h1>
    <div v-html="post[0].content.rendered"></div>
  </section>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      post: {}
    }
  },
  asyncData ({ params }) {
    // console.log(params)
    // console.log(params.slug)
    return axios.get(`https://hoge.com/wp-json/wp/v2/book?slug=${params.slug}`)
      .then(response => {
        return { post: response.data }
      })
      .catch((error) => {
        return { error: error }
      })
  }
}
</script>

結構つまってしまって、REST APIのエンドポイント、IDベースでしか記事情報が取得できないと思って
https://hoge.com/wp-json/wp/v2/book/${params.id} でid取得したあとにスラッグ取るのどうやんのかなとか思ってましたが、
https://hoge.com/wp-json/wp/v2/book?slug=${params.slug} でいけました

なのでAPI側を理解してなかったっていう話でした
参考: https://unicorn.limited/jp/item/949