VueやNuxtで表示非表示を操作する場合は、v-if v-else ・ v-showが挙げられます。
今回は、特定のページではAを表示し他のページではBを表示する方法をご紹介します。

表示を切り替える方法

前述した通りVueやNuxtでの表示切り替えは、

• v-if、v-else
• v-show

これらを使うことが多いかと思います。

今回はv-if v-elseを使用して切り替えてみようと思います。

実装したい内容イメージ

全ページ共通ヘッダーが用意されています。
しかし下記のような仕様となっています。

・/hoge では、色違いのロゴ画像が使われている
・その他のページは共通のロゴ画像

要するに/hogeだけロゴ画像の色違いが使われているといった感じです。

マークアップ

<template>
   <header class="lHeader">
      <img src="@/assets/img/logo-black.svg" alt="logo">
   </header>
</template>

記述を見やすくする為、必要な部分だけ載せていきます。
上記の様にヘッダー内にロゴを画像として読み込んでいます。

条件分岐の記述を足す

<template>
   <header class="lHeader">
      <img src="@/assets/img/logo-black.svg" alt="logo">
   </header>
</template>

このままだと、全てのページで黒色のロゴが読み込まれてしまいます。
なので、条件を指定して画像を出し分ける記述を足していきましょう。
(hoge = 白ロゴ. それ以外 = 黒ロゴ)

<template>
   <header class="lHeader">
      <img v-if="this.$router.name === 'hoge' " src="@/assets/img/logo-white.svg" alt="logo">
      <img v-else src="@/assets/img/logo-black.svg" alt="logo">
   </header>
</template>

現在表示しているページ名をこちらで取得しています。

this.$router.name

現在表示しているページ名が、hogeだった場合 true

v-if="this.$router.name === 'hoge' "

そうでなかった場合は、falseになるので v-elseの方を表示する形になります。

まとめ

layoutまるごと別で作ってしまい、読み込ませるのもいいのかもしれませんがこれくらいの違いであればv-if v-elseを使ってしまった方がミニマムで済むので良いですね。
使えそうな場面はそこそこ多そうなのでしっかりと覚えていきたいと思います。