Vue.js vue-router設定

#vue-routerを設定する

```
$ vue create router
```
`Manually select features `を選択

```
Vue CLI v4.4.4
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 
```

スペースキーで`Router`を選択

```
Vue CLI v4.4.4
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
```

`Y`を選択

```
Vue CLI v4.4.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) 
```


#ルーティングの設定

```html:Vue/router/src/App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/privacy">プライバシー</router-link>
    </div>
    <router-view/>
  </div>
</template>
```


```js:Vue/router/src/router/index.js

import Privacy from '../views/Privacy.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/privacy',
    name: 'privacy',
    component: Privacy
  },
]
```

`Vue/router/src/views/Privacy.vue`へファイルを新規作成する

#get値を取得する

```html:Vue/router/src/App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/user/1">ユーザー</router-link>  
      <router-link :to="{name: 'user', params: {id: 3}, query: {q: 'hoge'}}">ユーザー</router-link>  //get値でルーティングする
    </div>
    <router-view/>
  </div>
</template>
```

```js:Vue/router/src/router/index.js
import User from '../views/User.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User
  },
]
```


```php:Vue/router/src/views/User.vue
<template>
  <div class="user">
    <h1>{{ this.$route.params.id }}</h1>
    <div>{{ this.$route.query.q }}</div>  //http://localhost:8080/user/1?q=hoge
  </div>
</template>
```


#ルートをネストする

`/user:id`にアクセスした場合、`first` `second`のコンポーネントを表示させる

```js:Vue/router/src/router/index.js
import FirstChild from '../views/user/FirstChild.vue'
import SecondChild from '../views/user/SecondChild.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User,
    children: [
      {
        path: 'first',  // スラッシュは記載しない
        name: 'first',
        component: FirstChild
      },
      {
        path: 'second',
        name: 'second',
        component: SecondChild
      },
    ]
  },
]
```

```html
<template>
  <div class="user">
     <div>
         <router-link :to="{name: 'first'}">ファースト</router-link>
         <router-link :to="{name: 'second'}">セカンド</router-link>
     </div>
    <router-view/>  //frist,secondのコンポーネントを表示させる
  </div>
</template>
```

#ワイルドカードのルートをリダイレクトする
設定以外のルートの場合、`'/'`へリダイレクトする
ワイルドカードはルーティングの最後に記載する

```js:Vue/router/src/router/index.js
Vue.use(VueRouter)

  const routes = [
  {
    path: '*',
    redirect: '/',
  },
]
```


#遅延ローディングについて
`component: Home`へアクセス時
`component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')`と
記載することで`Home.vue`表示した時に`About.vue`は読み込まず
リンク押下時に読み込むことで表示を軽くする

```js:Vue/router/src/router/index.js
Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
]