Vue基礎：Routerの書き方

#はじめに
Vue.jsのRouterの書き方はいくつかがありますので、まとめてみます。

#1. インストール
`npm install vue-router`

#2. appに導入
```javascript
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')
```
詳細：https://router.vuejs.org/ja/guide/#javascript

HTMLでは下記のように記載できます。

```html
 <router-link to="/foo">Go to Foo</router-link>
 <router-link to="/bar">Go to Bar</router-link>
```

JSでは下記のように記載できます。

```javascript
// URLのパラメータから情報を取得する。/user/xxxxx
const userId = this.$route.params.userId

// URLのQueryから情報を取得する。　/user?userId=xxxx
const userId = this.$route.query.userId

// ページ遷移する
window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
```

#3. 動的ルートマッチング
定義サンプル：

```javascript
const router = new VueRouter({
  routes: [
    // コロン
    { path: '/user/:userId', component: User }
  ]
})
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/c7bd99bb-00f4-288a-9c7a-8bb9d5a97448.png)


#4. ネストされたルート
サイトにあるサンプルです。マイページの実装ではこのパターンを利用できそうです。

```javascript
const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
```
```javascript
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // /user/:id/profile がマッチした時に
          // UserProfile は User の <router-view> 内部で描画されます
          path: 'profile',
          component: UserProfile
        },
        {
          // /user/:id/posts がマッチした時に
          // UserPosts は User の <router-view> 内部で描画されます
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})
```
URL: https://router.vuejs.org/ja/guide/essentials/nested-routes.html

#5. ページ遷移の記載仕方
##HTMLタグで定義例
`<router-link :to="{ name: 'user', params: { userId: 'xxxxx' }}">User</router-link>`

##JS記載

```javascript
/////////////////////////
// 文字列パス
// /home
router.push('home')

// オブジェクト
// /home
router.push({ path: 'home' })

// 名前付きルート
// /user/xxxxx
router.push({ name: 'user', params: { userId: 'xxxxx' } })

// query
// /myapge?userId=xxxxx
router.push({ path: 'mypage', query: { userId: 'xxxxx' } })

```

※一点注意したいものがあります。paramsの動作です。下記の流れで説明します。

- router定義例（動的パラメータはuserIdを定義）

```javascript
const router = new VueRouter({
  routes: [
    // コロン
    { path: '/user/:userId', component: User }
  ]
})

```

- ページ遷移

```javascript
// paramsにrouterに存在しないパラメータuserName,ageのデータも送付
this.$router.push({ name: 'user', params: { userId: 'xxxxx', userName: 'tanaka', age: '30' } })
```

- 遷移先ページの初期化

`this.$route.params.userId`,`this.$route.params.userName`,`this.$route.params.age`でもデータが取得できます。
ただし、F5で画面リフレッシュをすると、`this.$route.params.userName`,`this.$route.params.age`が取得できません。
この場合は、paramsではなく、queryで渡すことで回避できます。

#6. リダイレクトとエイリアス
## リダイレクト
URL「/a」をアクセスすると、「/b」にRedirestします。

```javascript
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
```

## エイリアス
URL「/a」と「/b」は同じ動作になります。

```javascript
const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})
```

参考URL：https://router.vuejs.org/ja/

以上