GraphCMS & Nuxtjs Blogで動的ルーティング

やりたい事

https://hogehooge.app/post/<ここにCMSで自分が登録したSlug名を入れたい。>

よくあるのはprimary keyとかに設定されている自動連番を入れていたりする。
https://hogehooge.app/post/1
みたいに。

Nuxt.jsなので、動的なルーティングは簡単。

pages
├── index.vue
└── posts
    └── _slug.vue 

よく_id.vueとかにするが、分かりやすく_slug.vueと名付けてみる。
つまり何でもOK。

CMS側でfielsにslugを作って登録

cms側でslugを登録しておく。
この時、uniqueとrequireのbalidationをかけておく。

ルーティングの指定

自分の実装方法は、記事の一覧を取得取得した時点で、詳細ページの情報も全て取得しており、詳細ページに行く際に再度取得せず、idやslugなどのユニークな値を用いて、該当ページに必要な情報を取得する方法であるので、ルーティングのパラメーターの部分をslugの値にする。

methods: {
    detail(slug) {
      // console.log(id)
      this.$router.push(`./posts/${slug}`)
    }
  }

詳細ページ側でfindで記事取得。
自分の実装では、heroMenuのコンポーネントと、contents表示のコンポーネントの双方で、findで取得しているので、二つとも同じ事を書く。もっとDRYにできる方法がありそうだ。

computed: {
    ...mapState(['posts']),
    post() {
      const targetPost = this.posts.find(
        v => v.slug === this.$route.params.slug
      )
      return targetPost
    }
  }

まとめ

SEOがよくなるとかあるのか分からないが、自動生成された、idを使うよりも、自分のこんなslugがいいなと思ったものが形に出来ると気分がいいし、かっこいい。