【vue-router】Vue.jsで共通ヘッダーを作る

【Vue.js】Vue.jsで共通ヘッダーを作る【header】

ここではvue-cliで作成したVue.js + webpackアプリケーションで共通ヘッダーを実装する方法をご紹介しています。
vue-routerも使用しています。

もととなるソースは、以下の手順で取得してきたものです。
作業したい箇所で以下を実施します。
npmはインストール済みであるとして進めますが、まだnpmの導入が済んでいない方は導入をお願いします。

vue-cliをインストール

$ npm install -g vue-cli

プロジェクトを作成

今回はmy-appという名前で作成します。

$ vue init webpack my-app

いろいろな質問が聞かれますが、今回はvue-routerを使った実装なので、

「Install vue-router?」と聞かれる箇所だけは、yを押してenter(return)

それ以外はひたすらenterで問題ありません。
これで、開発環境の準備は完了です。

$ cd my-app

作成したプロジェクトに移動して、以下を実施します。

$ npm install
$ npm run dev

これでブラウザが開いて、サンプルの画面が表示されるはずです。
今回は、これに共通headerを追加します。

ファイルの修正・追加

追加したコンポーネントは以下の4つです。

・src/components/HeaderItem.vue
・src/components/Game.vue
・src/components/Info.vue
・src/components/Gift.vue

その他、修正したファイルは以下の2つです。

・src/App.vue
・src/router/index.js

HeaderItem.vueの追加

componentsの下に、HeaderItem.vueを新規作成します。
これを共通ヘッダーコンポーネントとします。

<template>
  <header id="header">
    <h1>This is the header.</h1>
    <nav id="header-nav">
      <ul>
        <router-link tag="li" id="home-nav" to="/" exact><a>ホーム</a></router-link>
        <router-link tag="li" id="game-nav" to="/game"><a>ゲーム</a></router-link>
        <router-link tag="li" id="info-nav" to="/info"><a>情報</a></router-link>
        <router-link tag="li" id="gift-nav" to="/gift"><a>お土産</a></router-link>
      </ul>
    </nav>
  </header>
</template>
<!-- style中身は省略 -->
<style scoped>
</style>

<router-link tag="li" id="home-nav" to="/" exact><a>ホーム</a></router-link>

router-linkはデフォルトだと、aタグ扱いだけど今回はliタグにしたかったので、「tag="li"」を追加しています。
exactでアクティブクラスの設定に必要ですが、他の方法で実装してもいいです。

<style scoped>
<style>

styleタグに「scoped」をつけると、cssがこのComponent内だけでしか適応されないのが地味に嬉しいです。

その他追加ファイル

これはちゃんと遷移できてるよね、っていう確認のためなので適当に作成したコンポーネントです。
それぞれページ名称のみが表示されます。

Game.vue

<template>
  <div class="game">Game</div>
</template>

Info.vue

<template>
  <div class="info">Info</div>
</template>

Gift.vue

<template>
  <div class="gift">Gift</div>
</template>

App.vueの修正

共通ヘッダーなど、ルート（url）によって表示・非表示を切り替えないコンポーネントはApp.vueに記載します。

修正前

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>
<!-- styleは省略 -->

修正後

<template>
  <div id="app">
    <HeaderItem/>
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
import HeaderItem from './components/HeaderItem'

export default {
  name: 'app',
  components : {
    HeaderItem
  }
}
</script>
<!-- styleは省略 -->

template内に共通headerとなるコンポーネント、ここでは「HeaderItem」を記載します。

  <HeaderItem/>

これは省略表記なので、省略しない場合は

  <HeaderItem></HeaderItem>

と記述します。

上記のコンポーネントを使うために、importして、componentの読み込みが必要です。

import headerItem from './components/HeaderItem'

// name: 'app'のうしろに追加
export default {
  name: 'app',
  components : {
    headerItem
  }
}

index.jsの修正

修正前

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

修正後

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Game from '@/components/Game'
import Info from '@/components/Info'
import Gift from '@/components/Gift'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/game',
      name: 'ゲーム',
      component: Game
    },
    {
      path: '/info',
      name: '情報',
      component: Info
    },
    {
      path: '/gift',
      name: 'お土産',
      component: Gift
    },
  ]
})

今回追加した3つのComponentをインポートします。

import Game from '@/components/Game'
import Info from '@/components/Info'
import Gift from '@/components/Gift'

routerに追加

  {
    path: '/game',
    name: 'ゲーム',
    component: Game
  },
  {
    path: '/info',
    name: '情報',
    component: Info
  },
  {
    path: '/gift',
    name: 'お土産',
    component: Gift
  },

これで完成です。