【Nuxt.js】Nuxt実践編：route.nameで表示/非表示を切り替える

前置き

⬇️パンくずリストあり: 化粧品一覧ページ, index

⬇️パンくずリストなし: お問い合わせページ

今回はパンくずリストを🥐
ページによって表示/非表示の
切り替えをしていきます🌱👀

$route.nameで
表示しているurlを取得し、
それに応じて表示の
切り替えをしていきます🌟

$route.paramsや
$router.pushは記事にしていたのですが
$route.nameは初めてです❤️🤗

⬇️middlewareで1度だけ使用しましたが、
　細かい解説は特にしておりません😳💦
【Nuxt.js】Nuxt文法編：middleware

公式に沿ったルーティングまとめの記事を
出しても良いかもしれないですね🤔💭
https://ja.nuxtjs.org/docs/2.x/features/file-system-routing

構成

構成は分かってる❗️
という方は飛ばしちゃってください✈️

コンポーネント

アトミックデザイン

まずはコンポーネントの
構成を考えていきましょう🧸💭

⬇️componentsの分け方は
　こちらを参考にしてください💁‍♀️💕
【Nuxt.js】Nuxt番外編： アトミックデザインにおけるフォルダの分け方と サンプル集

パンくずリストはサイズは小さいですが、
役割としてはナビになるため
templatesに入れています。

パンくず < ヘッダー < layout

⬇️パンくずはこんな感じ🍞

<template>
  <div class="nav nav-breadcrumb section">
    <div class="container">
      <nuxt-link
        class="txt txt-link"
        to="/"
      >
        TOP
      </nuxt-link>
      <img src="/imgs/arw-right.png" alt="">
      <p class="txt">
        コスメ一覧
      </p>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .nav-breadcrumb {
  }
</style>

<nuxt-link

class="txt txt-link"

to="/"

TOP

</nuxt-link>

コスメ一覧

</p>

</div>

</template>

export default {

}

</script>

.nav-breadcrumb {

}

</style>

⬇️HeaderDefault.vueに
　NavBreadeをimportします。

<NavBread v-if="hoge" />
v-ifを使って
表示切り替えができそうですね💡
が、一旦おいておきましょう。

<template>
  <div class="header header-default">
    <header class="head">
      <div class="container">
        ここにheaderの中身
      </div>
    </header>
    <NavBread />
  </div>
</template>

<script>
import NavBread from '~/components/templates/navs/NavBread.vue'

export default {
  components: {
    NavBread,
  }
}
</script>

<style lang="scss" scoped>
</style>

ここにheaderの中身

</div>

</header>

</div>

</template>

import NavBread from '~/components/templates/navs/NavBread.vue'

export default {

components: {

NavBread,

}

</script>

</style>

⬇️layouts/default.vueに
　HeaderDefaultを入れて
　表示の固定をします。

<template>
  <div class="layout">
    <HeaderDefault />
    <nuxt />
    </div>
  </div>
</template>

<script>
import HeaderDefault from '~/components/templates/headers/HeaderDefault.vue'

export default {
  components: {
    HeaderDefault,
  }
}
</script>

</div>

</template>

import HeaderDefault from '~/components/templates/headers/HeaderDefault.vue'

export default {

components: {

HeaderDefault,

}

</script>

これで準備OKです✨🙆‍♀️

CSS

基本的にいつも省略しているのですが、
使ったものを書いておきます✍️

MDN: box-shadow
box-shadow: x, y, blur, spread, color;

MDN: CSS フレックスボックスレイアウト
display: flex;
justify-content: space-between;
align-items: center;
フレックスボックスのチートシート

⚠️text-align: center;
　だけで良い場合はflex不要

配色について

今回のカラーは完全に好みで決めましたが、
イメージから色を決めるのもオススメです✨🎨
https://www.canva.com/ja_jp/learn/100-color-combinations/
https://photoshopvip.net/86191
https://photoshopvip.net/102159

ある程度イメージが固まったら
自動で配色を決めてくれるツールを
使うと簡単で良いですね🤗💕

$route.nameで表示を切り替える

HeaderDefaultにimportした
NavBreadにv-ifが使えそうでしたね💡

その真偽値を出すために
$route.nameを使用します。
表示しているurlに対応するnameが
真の時に表示させれば良いんです🌷
表示するのはfaq以外のページです。

$route.nameは
Vue検証のここで
見ることができます✨👀

computedで真偽値の判定をします。

⬇️computedの記事はこちら
【Nuxt.js】Nuxt文法編：computed

<template>
  <div class="header header-default">
    <header class="head">
      <div class="container">
        ここにヘッダーの中身
      </div>
    </header>
    <NavBread v-if="isBread" />
  </div>
</template>

<script>
import NavBread from '~/components/templates/navs/NavBread.vue'

export default {
  components: {
    NavBread,
  },
  computed: {
    isBread () {
      return this.$route.name === 'index' ||
        this.$route.name === 'cosmetics' ||
    },
  },
}
</script>

<style lang="scss" scoped>
</style>

ここにヘッダーの中身

</div>

</header>

</div>

</template>

import NavBread from '~/components/templates/navs/NavBread.vue'

export default {

components: {

NavBread,

computed: {

isBread () {

return this.$route.name === 'index' ||

this.$route.name === 'cosmetics' ||

}

</script>

</style>

完成です🎉✨
本当にコード数行だけですね👏😂

まとめ

コンポーネントの構成に慣れていて
$routeを知っていれば
パッと思いついた方も
多いかもしれませんね💡😉

Nuxtでは動的ルーティング
$routeを活かして
できることが沢山あります🌟
ぜひこちらもチャレンジしてください❤️💪

Earle Roethle より:

2021.03.10 09:35

Hello my friend! I wish to say that this article is awesome, great written and come with almost all important infos. I'd like to see more posts like this .|

返信
- 佳子野村より:
  
  2021.03.11 15:23
  
  Thank you!
  Please comment if you have any content you would like to see in the article.
  We will continue to send!
  
  返信