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

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

もともとのソースは、以下の手順で取得してきたもの。
作業したい箇所で以下を実施。
(npmはインストール済みであるとして進める)

vue-cliをインストール

$ npm install -g vue-cli

プロジェクトを作成

$ vue init webpack my-app

いろいろな質問が聞かれるが、

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

それ以外はひたすらenterで問題ない。
これで、開発環境の準備は完了。

$ cd my-app

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

$ npm install
$ npm run dev

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

ファイルの修正・追加

追加したファイルは

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

修正したファイルは

・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の修正

修正前

<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></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>

上記のコンポーネントを使うために、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
    },
  ]
})

追加した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
  },

これで完成。