Blogブログ

Vue CLIで別ページだけ本来設定していたタグとは別のタグに切り替える

コーダー担当のMです。
タイトルの内容はどういうことかと言いますと、
例えばトップページはヘッダーのロゴをh1タグにしているけど、
会社概要や業務内容などの他ページではそのページの見出しがh1になり、
代わりにヘッダーのロゴにいれていたh1タグはpタグなどの別のタグに切り替わるようにする、というものです。
Vue CLIでSPAを実装している場合、共通部品のタグに対して条件分岐させる必要があります。

まず、切り替えを実装するのに私は以下を思いつきました。

• 切り替えたい記述の箇所にはv-ifで条件分岐
• mounted時に発動
• watch時に発動

ここまでは思いつきましたが、切り替えるための材料がパッと思い浮かばなかったです。
できれば今ある値だけで切り替えたい。
ソース内を見ていって見つけたのがrouter.jsでした。

routes: [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/page1/:param1',
    name: 'page1',
    component: Page1
  },
  {
    path: '/page2/:param1/:param2/:param3',
    name: 'page2',
    component: Page2
  }
]

nameの値を分岐材料にしてしまえば、新たに値を用意しなくても大丈夫でした。
ですが、なにをもって真か偽か値を定義付ける必要があるので、そのstateだけは追加しました。

結果　以下のようなソースになります。

template部分

<h1 v-if="currentPage"><img src="/path/logo.png" alt="logo"></h1>
<p v-else><img src="/path/logo.png" alt="logo"></p>

まずv-ifを使ってdata名を入れておきます。
自分が現在いるページという意味合いで名前はcurrentPageとしました。

data部分

  data: function () {
    return {
      currentPage: true
    }
  }

dataでデフォルト値をセットしておきます。
trueならh1タグ、別のページならfalseとしました。

mounted部分

mounted: function () {
    var routeInstance = this.$route
    this.switchH1(routeInstance)
  }

router設定をmountedのタイミングで別変数に格納し、 判定用メソッドに引数として設定します。

methods部分

switchH1: function (routeInstance) {
      if (routeInstance.name === 'home') {
        this.currentPage = true
      } else {
        this.currentPage = false
      }
    }

methodで実際に判定させる処理になります。
トップページのときだけtrueなのでh1タグに、
別のページはすべてfalseに入るのでpタグになります。

watch部分

watch: {
    $route (routeInstance, from) {
    this.switchH1(routeInstance)
  }

ページ切替時にもメソッドを発動させたいので、
watchにも判定させるためのメソッドを呼ぶようにします。

同じコンポーネントでパラメーター変更を検知するためには、 $route オブジェクトを watch するだけです。

https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%8F%E3%82%9A%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5

これで「トップページはh1タグ、他ページは別のタグ」という処理ができました。
判定材料を変えれば他にも応用が利きそうです。