Vueのヘッダーをカスタマイズしてみた件

今回はコンポーネントの親である、App.vueファイルでヘッダーとフッターのカスタマイズをしてみたいと思います。

ヘッダーの修正

ヘッダー部のリンクの変更とCSSを調整したいと思います。
変更するファイルはrouter.jsとApp.vue。また、新規タスク登録用ページTask.vueの新規作成です。

まずはTask.vueを作成してしまいましょう。

Task.vueの作成

Task.vueに関してはとりあえず最低限の記述だけで済ませます。

// Task.vue
<template>
  <div class=”task”>
    TASK
  </div>
</template>
<script>
export default {
  name: ‘task’
}
</script>

次はrouter.jsの修正です。

router.jsの修正

router.jsでは先にTodo.vueへのリンクを追加していますが、ルートパスでそのまま入れただけになっていましたので一緒にリンクの整理をしてしまいます。

import Vue from ‘vue’
import Router from ‘vue-router’
import Todo from ‘./views/Todo.vue’
import Task from ‘./views/Task.vue’

Vue.use(Router)

export default new Router({
  mode: ‘history’,
  base: process.env.BASE_URL,
  routes: [
    {
      path: ‘/todo’,
      component: Todo
    },
    {
      path: ‘/task’,
      component: Task
    },
    {
      path: ‘*’,
      component: Todo
    }
  ]
})

前回同様import構文でTaskコンポーネントを呼び出し。Routerインスタンスの中に追加しています。また最後に’*’のパスを使い上記の二つ以外のURLの場合Todoコンポーネントを呼び出すという作りにしています。
本来は404ページを作りそこへ遷移するのですが、今回は404ページを割愛するためTodoページへ遷移するようにしています。
これでリンクの設定は完了しましたので最後にApp.vueを修正していきましょう。

App.vueのカスタマイズ

カスタマイズ前のtemplateの中はこんな感じです。

// App.vue
<template>
  <div id=”app”>
    <div id=”nav”>
      <router-link to=”/”>Home</router-link> |
      <router-link to=”/about”>About</router-link>
    </div>
    <router-view/>
  </div>
</template>

router-linkの変更とCSSの修正を加えます。
CSSに関しては今回割愛いたします。レイアウト用のタグなどを加えお好きなデザインで仕上げてみてください。最低限必要な変更後のコードは以下になります。

// App.vue
<template>
  <div class=”app”>
    <div class=”nav”>
      <router-link to=”/todo”>Todo</router-link>
      <router-link to=”/task”>Task</router-link>
    </div>
    <router-view/>
  </div>
</template>

諸々とタイトルの追加、CSSとレイアウト用のタグで仕上げて以下のまで完成しました！

次はヘッダー部のナビゲーションを現在地に下線が出るデザインに仕上げます。
vue.jsのComputedプロパティを使い簡単なデータバインディングをしてみましょう。

データバインディング

データバインディングとはざっくり簡単に話すと、データとユーザーへの表示を随時おんなじ物にするという機能です。
vue.jsのディレクティブでは「v-bind」という機能があります。

v-bind

v-bindの使い方はHTMLのタグの属性に「v-bind:」をつける、もしくは短縮形として「:」だけでもよいです。例としてクラスにバインディングする場合は

<a :class=”{active : isActive}”></a>

このように書きます。 オブジェクトで渡す他に配列で渡すことも可能です。
またdataプロパティでなくcomputedプロパティを記述することもできます。
詳しいリファレンスはこちらにあるので参考にしてください。

v-bindを使い現在のURLとヘッダーのナビゲーションをデータバインディングします。今回は直接computedプロパティから渡すことにしましょう。
また現在のURLを取得するためにVue Routerを呼びだします。
まずcomputedプロパティを作ります。

export default {
computed: function navPoint () {
return this.$route.fullPath
}
}

computedプロパティは必ずretrunを返します。
this.$routeでVue Routerを呼び出しfullPathプロパティで現在地の値を取得し返しています。
この返り値をバインドしたクラスに渡します。ナビゲーションのタグは以下のように受け取ります。

<router-link to=”/todo”  :class=”{‘is-current’: navPoint === ‘/todo’}”>Todo</router-link>
<router-link to=”/task”  :class=”{‘is-current’: navPoint === ‘/todo’}”>Task</router-link>

オブジェクトの真偽値をcomputedプロパティの返り値で判定しています。
これでナビゲーションも完成です。
ヘッダーに関してはこれで完成になります。
次はコンテンツの中を作っていきましょう。