事業サイトにて各ページにパンくずリストを表示させる処理を追加した時に動的パスに対しての指定する部分で少しだけ躓いたので記録しておきます。

Breadcrumb.vue

一旦完成形としたコードは以下の通りです。

<template>内記述

<template>
  <div class="cBreadcrumb__wrap">
    <ul class="cBreadcrumb">
      <li><nuxt-link to="/">Top</nuxt-link></li>
      <li v-if="servicePath">
        <nuxt-link to="/service">Service</nuxt-link>
      </li>
      <li v-else-if="newsPath">
        <nuxt-link to="/news">News</nuxt-link>
      </li>
      <li v-else-if="mediaPath">
        <nuxt-link to="/media">Media</nuxt-link>
      </li>
      <li v-else-if="casePath">
        <nuxt-link to="/case">Case</nuxt-link>
      </li>
      <li>{{ title }}</li>
    </ul>
  </div>
</template>

script内記述

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      servicePath: false,
      newsPath: false,
      mediaPath: false,
      casePath: false,
      router: '',
    }
  },
  watch: {
    '$route.path': {
      handler(_new, _old) {
        switch (_new) {
          case '/service/flow':
            this.servicePath = true
            break
          case '/service/faq':
            this.servicePath = true
            break
          case `/news/${this.$route.params.slug}`:
            this.newsPath = true
            break
          case `/media/${this.$route.params.slug}`:
            this.mediaPath = true
            break
          case `/case/${this.$route.params.slug}`:
            this.casePath = true
            break
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
}
</script>

コンポーネントの使い方

呼び出したい箇所で以下のようにして呼び出します。

<Breadcrumb title="hoge" />

ポイント

動的ルーティング箇所での分岐の仕方に辿り着くまでに少しだけ時間がかかりましたが、以下の記述で動的ページのスラッグが取れるようです。

this.$route.params.slug