Vue-router 概要

学習記録。Vue-routerについて、そのインストール方法や使用方法を大まかにまとめる。

## インストール方法

```shell
npm install --save vue-router
```



## 基本的な使用方法

1. ルーティング定義。

   `src/router/index.js`に以下を記述。

   * パス`/`にアクセスすると`<router-view>`の中身を`Top`コンポーネントとして置換。(その他も同様)

   * 先に定義したものほどルーティングの優先度が高い。

   * `mode:history`

     * URLから`#`を除去。
     * 遷移履歴を保存し、ページのリロードなくページ遷移可能。

     ```javascript
     import Vue from 'vue'
     import Router from 'vue-router'
     import Top from '@/components/Top.vue'
     import Page1 from '@/components/Page1.vue'
     import Page2 from '@/components/Page2.vue'
     
     Vue.use(Router)
     
     export default new Router({
         // パスから'#'を取り除く
         mode: 'history',
         routes: [
             // パスとコンポーネントの対応関係を記述する。
             {
                 path: '/',
                 name: 'top',　// 省略可
                 component: Top
             },
             {
                 path: '/page1',
                 name: 'page1',
                 component: Page1
             },
             {
                 path: '/page2',
                 name: 'page2',
                 component: Page2
             }
         ]
     })
     ```

2. ルーティング定義読み込み。

   `src/main.js`に`router`への依存関係を記述。

   * vue-routerの内容をrootであるmain.jsで読み込むことでそれぞれのコンポーネントで定義不要となる。

     ```javascript
     import Vue from 'vue'
     import App from './App.vue'
     import router from './router' // 追加
     
     Vue.config.productionTip = false
     
     new Vue({
         router, // 追加
         render: h => h(App),
     }).$mount('#app')
     ```

     

3. ルーティング制御コンテンツを表示。

   `src/App.vue`に、以下を記述。

   * `<router-link>`:ナビゲーションを定義。`<a>`タグとしてレンダリング。

   * `to`:遷移先を指定。

   * `router-view`:`routes`で設定したパスに一致するコンポーネントをレンダリング。

     ```vue
     <template>
       <div id="app">
         <div id="nav">
           <router-link to="/">Top</router-link> |
           <router-link to="/page1">Page1</router-link> |
           <router-link to="/page2">Page2</router-link>
         </div>
         <router-view/>
       </div>
     </template>
     
     <script>
     export default {
       name: 'App'
     }
     </script>
     
     <style>
     ...
     </style>
     ```

     

## その他Tips

### スクリプトで遷移

```javascript
this.$router.push('/')
```

### 現在のパス取得

```javascript
this.$router.path
```

### 動的ルーティング

パスパラメータ設定。`:`を用いて、以下のように記述。

```javascript
	routes: [
        {
            path: '/page1/:id',
            name: 'page1',
            component: Page1
        }
  ]
```

パラメータ取得の際には、以下のように記述。

* `/page1/1`というパスの場合、`this.$route.params.id`とすることで`1`という値を取得することが可能。

```javascript
this.$route.params
```

クエリパラメータの取得の際には、以下のように記述。

* `/page1?id=1`というパスの場合、`this.$route.query.id`とすることで`1`という値を取得可能。

```javascript
this.$route.query
```



### 定義していないパスに対するルーティング

ルーティングで定義していない全URLへのリクエストをキャッチ。

以下は、定義していないルーティングを404ページへ遷移させる例。

```javascript
import NotFound from '@/components/errors/404.vue' // 追加
...
routes: [
  ...
	{ 
      path: '*',
      name: 'notFound',
      component: NotFound
	} 
]
```



## 参考

* [VueRouterの基本とルーティングを構築するはじめの一歩](https://www.ritolab.com/entry/180)
* [今さら聞けない？Vue Router](https://qiita.com/hshota28/items/765cf903f055754f7557)
* [vue.jsとvue-routeを組み合わせてテストする際はまったこと](https://qiita.com/souko2525/items/18f82e5f9897c507d990)
* [【Vue.js】vue-routerの基礎をサンプルを用いて解説](https://b1tblog.com/2019/10/03/vue-router/)