Vue.jsについての基礎（Vue-router）

#はじめに
おはようございます。こんにちは。こんばんは。
ワタタクです。
今回は前回に引き続きVue.jsをやっていきたいと思います。
本日はVue-routerです。
では、早速見ていきましょう。
公式サイト
#準備
※インストール時に「Vue-routerいる？」と聞かれますので「いる」と選択すれば勝手に入ります。

インストールすればほぼ必要な設定は自動で行ってくれていますが、この項目を追加してください。

router/index.js

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

Vue.use(Router)

export default new Router({
  mode: 'history', //追加
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

デフォルトの挙動ではURLに#が含まれるが、mode:historyを指定することでURLから#を取り除くことができる。

• src/pages ディレクトリを作成する。

ここに画面遷移させる、vueファイルを格納する。

src
└── pages
    ├── top.vue
    ├── about.vue
    └── contact.vue

#使い方

• router/index.js にルートを登録する。

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//----------追加---------------
import Top from '@/pages/top'
import About from '@/pages/about'
import Content from '@/pages/content'
//-----------------------------

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    //----------追加---------------
    {
      path: '/top',
      name: 'Top',
      component: Top
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/content',
      name: 'Content',
      component: Content
    },
    //----------------------------------
  ]
})

＜解説＞

import コンポーネント名 from 'ページ遷移で呼ばれるvueファイルのパス'

と

{
	path: '宛先パス'
	(name: コンポーネント名)
	conponent コンポーネント名
}
※()は省略化

##[TIPS]
※import文の@の意味

build/webpack.base.conf.js

resolve: {
	extensions: ['.js', '.vue', '.json'],
	alias: {
	  'vue$': 'vue/dist/vue.esm.js',
	  '@': resolve('src'),
	}
  },

ここに書かれている '@': resolve('src'), は、「import 文の文字列が @ で始まっていた場合、src/ というディレクトリからのパスとして扱う」という意味になります。

• 画面遷移させる

テンプレートに以下を記述してください。

App.vue

<template>
  <div id="app">
    <div class="header">
      <!--/////////////追加//////////////-->
      <router-link to="/">
        home
      </router-link>
      <router-link to="/top">
        top
      </router-link>
      <router-link to="about">
        about
      </router-link>
      <router-link to="content">
        content
      </router-link>
      <!--///////////////////////////////-->
    </div>
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ここで重要なのは

<router-link to="/">home</router-link>

です。
この構文をテンプレートに記述すると遷移します。
※<router-link>は<a>としてレンダリングされる。
遷移先をto属性の値として指定する。

もう一つは、

<router-view/>

このタグの部分に遷移先のvueが表示されるイメージです。
#404ページへの遷移方法

roter/index.js

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

import Top from '@/pages/top';
import About from '@/pages/about';
import Content from '@/pages/content';
//----------追加---------------
import NotFound from '@/pages/error/404.vue'
//-----------------------------

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/top',
      name: 'Top',
      component: Top
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/content',
      name: 'Content',
      component: Content
    },
    //----------追加---------------
    { // 追加
      path: '*',
      name: 'notFound',
      component: NotFound
    }
    //----------------------------------
  ]
})

全マッチのルーティングは、ルーティングで定義していない全てのURLへのリクエストをキャッチするルーティングです。
そこへ定義済みではない全てのルーティングを渡すようにしてみます。

##[TIPS]
###router.pushを使った遷移
<router-link>は宣言的な書き方。router.pushを使うとプログラム上で動的な遷移が可能になる。

this.$router.push('/');

#追記(2019/12/05)
##パラメーター付きの遷移方法
Vueで開発しているとパラメーターをつけて遷移したい時が出てくると思うので紹介します。

例えばブログの一覧ページから「ID:1」の記事詳細ページを読みたい時があったと仮定します。

<router-link v-bind:to="{ name : 'Detail', params : { id: 1}}">

router/index.js

{
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
}

上記のように記述するとパラメーター「1」をつけて「Detailページ」に遷移してくれます。

以上。
#最後に
最後まで読んでいただきありがとうございました。
もし、間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです。
Vue.jsについての基礎(基本構文),の方で、Vue.jsについての基礎について書かせてもらっているので、
よろしければ、こちらもご覧下さい。

次回は、VuexとかNuxt.jsとかTypeScriptとかについて触れていければと思います。