Vueと共通

【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に入れています。

directory

components/
--| templates/
----| headers/
------| HeaderDefault.vue
----| navs/
------| NavBread.vue

layouts/
--| default.vue

pages/
--| cosmetics/
----| index.vue
--| faq.vue
--| index.vue

パンくず < ヘッダー < layout

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

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

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

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

これで準備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で表示を切り替える

HeaderDefaultimportした
NavBreadv-ifが使えそうでしたね💡

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

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

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

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

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


まとめ

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

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

⬇️route関連の記事はこちら
【Nuxt.js】Vue Router復習編:params, queryを使おう
【Nuxt.js】Modal実践編:QueryでModalを管理する①
【Nuxt.js】pagination実践編:$router.pushで簡単実装!

-Vueと共通
-,

© 2024 aLiz Nuxt