# Vue Router の雰囲気を掴むためにやったこと

Tags: JavaScript vue

お疲れ様です、ナガです。

ナガの普段の業務は html、css、jQueryで静的ページを構築するのがメインです。

サーバーサイド系の言語（phpとか）を触ってきていないためルーターという言葉に馴染みがないのでルーティングってなんやねんというところ入りました。

# とりあえずやったこと

公式ドキュメントを一通り読んで手を動かしました。

Webpackの設定とかシンドイため、初期設定には vue-cli 使いました。

設定は yarn を使用する以外は Enter ポチポチ押していきました。

• Vue Router 公式ドキュメント
• Vue CLI

# 環境

• Mac OS X El Capitan
• node V8.10.0
• yarn v1.7.0
• vue v2.5.2
• vue-router v3.0.1
• vue-cli v2.9.6

# はじめに

vue-cli を使ってプロジェクトの初期設定を行うとデフォルトで Vue Router が使えるようになっています。

エンドポイントである main.js に router のオプションがインポートされており、 src/router/index.js を見ると Vue Router がインポートされています。

vue-cliを使ってプロジェクトを作成したらプロジェクトルートに移動し、下記コマンドを叩いて開発を始ます。

vue init webpack my-router-project
cd my-router-project
yarn run dev

# src/main.js

このファイルは特に編集しなくてもルーティングは可能です。

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, // アプリケーションで使用できるようにVueインスタンスに挿入
  components: { App },
  template: '<App/>'
})

# src/router/index.js

router のオプションを書いてくファイルになります。 コンポーネントをインポートして、このルートの場合はこのコンポーネントを表示させるみたなのを設定します。

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

// vue-router の呼び出し
Vue.use(Router)

// importしたときにこのルーターインスタンスを呼び出す
export default new Router({
  routes: [
    {
      path: '/', // ルートのパス
      name: 'HelloWorld', // ルートの名前
      component: HelloWorld // ルートに使用するコンポーネント
    }
  ]
})

# src/App.vue

初期設定の場合、ルートにアクセスすると <router-view/> コンポーネントに HelloWorld コンポーネントが表示されます。

<template>
  <div id="app">
    <router-view/> <!-- ここにルートとマッチしたコンポーネントが表示される -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

# 基本的なルーティング（ページ遷移）

ルーティング先のコンポーネントを作る必要があります。

ここでは「HogePage.vue」というコンポーネントを作ったと仮定します。

# src/components/HogePage.vue

<template>
  <h1>This is HogePage</h1>
</template>

<script>
export default {
  name: 'HogePage'
}
</script>

新規コンポーネント「HogePage.vue」を追加したら、ルーティングできるようにしたいので router のオプションを編集します。

# src/router/index.js

router のオプションに「HogePage.vue」を追加する。

/* 省略 */
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hogepage',
      name: 'HogePage',
      component: HogePage
    },
  ]
})

# src/components/HelloWorld.vue

vue-cliでプロジェクトを作成した場合にデフォルトで作成されるコンポーネント「HelloWorld.vue」を次のように編集します。

ルーティングには <a>タグではなく <router-view/> を使います。

to パラメータに遷移したいルートを渡します。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link to="/hogepage">Go To Hoge Component</router-link>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  /* 以下省略 */
}
</script>

# パラメータを渡したい

# html的

<router-view/> コンポーネントに v-bind:to を使います。

オプションにオブジェクトで遷移先のコンポーネント名とパラメータを渡します。

<router-link :to="{
  name: 'HogePage',
  params: {
    category: 'category_name',
    post_id: 123
  }
}">Hello width Param</router-link>

# JS的

Vue インスタンスの内部では、 $router でルーターインスタンスにアクセスできるので this.$router.push を使って遷移できます。

下記の記述で上記のhtml的と同じ意味です。

name には routes で設定した各コンポーネント名を入れてください。

methods: {
  changeRouter () {
    this.$router.push({
      name: 'HogePage',
      params: {
        category: 'category_name',
        post_id: 123
      }
    })
  }
}

遷移先のコンポーネントでパラメータを表示させるには $route を使ってルーターインスタンスにアクセスできるので、それを使います。

上記のようなカテゴリと投稿IDを受け取る場合は下記のような記述になります。

<template>
  <h1>This is HogePage</h1>
  <div class="post_detail">
    <p>カテゴリ名： {{ $route.params.category }}</p>
    <p>投稿ID： {{ $route.params.post_id }}</p>
    <!-- 上と下は同じ内容 -->
    <p>カテゴリ名： {{ getCategoryName }}</p>
    <p>投稿ID： {{ getPostID }}</p>
  </div>
</template>

<script>
export default {
  name: 'HogePage',
  compute: {
    // script内部ではVue インスタンスにアクセスするため this を付ける
    getCategoryName () {
      return this.$route.params.category
    },
    getPostID () {
      return this.$route.params.post_id
    }
  }
}
</script>

# まとめ

以上が Vue Router の基本的な使い方になります。

凝ったことをしたい方はドキュメントに目を通すことをオススメいたします。

Vue.jsはドキュメントが充実してて本当に助かります。