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
がいいなと思ったものが形に出来ると気分がいいし、かっこいい。