Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

GraphCMS & Nuxt.jsで作った BlogでCMS側で自分が登録したSlugでルーティングする

More than 1 year has passed since last update.

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側でfielsslugを作って登録

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

ルーティングの指定

自分の実装方法は、記事の一覧を取得取得した時点で、詳細ページの情報も全て取得しており、詳細ページに行く際に再度取得せず、idslugなどのユニークな値を用いて、該当ページに必要な情報を取得する方法であるので、ルーティングのパラメーターの部分を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がいいなと思ったものが形に出来ると気分がいいし、かっこいい。

yujiteshima
Webエンジニアになりたくて、アラフォーからエンジニアになりました。 業務では、Java,C#, TypeScript, Angularをメインに使っています。 個人ではGolang,TypeScript,Vue,React,iOSと日々何か書いています。
https://nuxt-deploy-test-teshima.appspot.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away