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

#はじめに
おはようございます。こんにちは。こんばんは。
ワタタクです。
今回は前回に引き続きVue.jsをやっていきたいと思います。
本日は``Vue-router``です。
では、早速見ていきましょう。
[公式サイト](https://router.vuejs.org/ja/)
#準備
*※インストール時に<font color="red">「Vue-routerいる？」と聞かれますので「いる」と選択</font>すれば勝手に入ります。*
<img width="452" alt="1__node.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/fb3a0e7f-831d-5b20-f6fa-dff61fda7e49.png">

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

```js: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`` にルートを登録する。

```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文の@の意味

```js:build/webpack.base.conf.js
resolve: {
	extensions: ['.js', '.vue', '.json'],
	alias: {
	  'vue$': 'vue/dist/vue.esm.js',
	  '@': resolve('src'),
	}
  },
```
<font color="red">ここに書かれている '@': resolve('src'), は、「import 文の文字列が @ で始まっていた場合、src/ というディレクトリからのパスとして扱う」</font>という意味になります。

- 画面遷移させる

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

```vue: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>
```

ここで重要なのは

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

もう一つは、

```html
<router-view/>
```
このタグの部分に遷移先のvueが表示されるイメージです。
#404ページへの遷移方法

```js: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``を使うとプログラム上で動的な遷移が可能になる。

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


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

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

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

```Js:router/index.js
{
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
}
```
上記のように記述するとパラメーター「1」をつけて「Detailページ」に遷移してくれます。

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

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