Vue Routerを使ってみた

Vueのプロジェクト作成からVue Routerを構築する手順を記載します。

# Vue Routerの導入
まず、Vueプロジェクトを作成します。

```bash
vue create [プロジェクト名]
```

Vueプロジェクト作成時にVue Roterを組み込む場合は、`Manually select features`を選択します。

```bash
Vue CLI v4.5.15
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
❯ Manually select features 
```

必要なモジュールを選択します。
`Router`を選択します。

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

バージョンを選択します。

```bash
? Choose a version of Vue.js that you want to start the project with (Use arrow 
keys)
❯ 2.x 
  3.x 
```

ヒストリーモードかどうかを選択します。

```bash
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) 
```
ここでは`Y`を入力しました。

linterおよびタイミングを選択します。（オプションで選択した場合）

```bash
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
```

```bash
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
```

各設定ファイルをどこに作成するかを選択します。
ここでは`In package.json`を選択しました。

```bash
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  In dedicated config files 
❯ In package.json
```

最後に設定を保存するかを聞かれます。

```bash
Save this as a preset for future projects? (y/N) 
```

Vueプロジェクトが作成されました。
表示されている通り、コマンドを入力すれば実行されます。

```bash
🎉  Successfully created project vue-router-test.
👉  Get started with the following commands:

 $ cd vue-router-test
 $ npm run serve
```
`npm run serve`を実行し、App running atに表示されているURLにアクセスすると、Vueの初期面が表示されます。

|![Vue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529227/91497e72-076f-4959-ca16-e0cbf1614791.png)|
|:--|

# Vue routerの構成
### main.js
main.jsにrouterが追加されています。

```src/main.js
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
```

### router/index.js
src配下にrouter/index.jsにrouterが追加されています。

```src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;
```

初期ではルート`/`と`/about`が記載されており、ルートはHome、AboutはAbout.vueがcomponentに指定されています。
Homeは`Home.vue`がimport文にて定義されており、Aboutはcomponentにimport文が直書きされています。
Aoubtの書き方はコメントにもある通り、lazy-loadedでコンポーネントを読み込むやり方です。
lazy-loadedの場合は、ページ遷移した時に初めてコンポーネントが読み込まれるようになっており、
初期段階でコンポーネントを読み込むよりも、ページが重くならないようです。

上記の場合、ルートのURLにアクセスした場合はHome.vueが表示され、`/about`にアクセスした場合はAbout.vueが表示されます。

### App.vue
またApp.vueにはrouter-linkが定義されています。

```src/App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>
```

先ほど表示した画面の上部を見てみると、HomeとAboutのリンクが表示されています。
Aboutをクリックすると`About.vue`の内容が表示され、Homeをクリックすると先程のHome画面が表示されます。

|![About.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529227/eb675c7e-22fb-09ad-6e3d-98ccfafe1589.png)|
|:--|

# Routeへの追加
次は新しくvueファイルを作成して、routeへ追加してみます。
src/viewsの中に新しくHoge.vueを追加します。中身はAbout.vueとほぼ同じです。

```src/views/Hoge.vue
<template>
  <div class="hoge">
    <h1>This is an hoge page</h1>
  </div>
</template>
```

router/index.jsのAboutの下にHogeのroute情報を追加します。

```src/router/index.js
  {
    path: "/hoge",
    name: "Hoge",
    component: () =>
      import(/* webpackChunkName: "hoge" */ "../views/Hoge.vue"),
  },
```

またApp.vueのリンクにHogeを追加します。

```src/App.vue
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |     ← `|`を追記
      <router-link to="/hoge">Hogeのページ</router-link>   ← 追加
    </div>
```

npm run serveにて起動し、アクセスするとHogeのページが増えています。

|![App.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529227/6cf75e07-34c4-3221-d4d3-1003e42d1051.png)|
|:--|

クリックするとHoge.vueの内容が表示されます。

|![Hege.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529227/499d78bb-e4f0-87a8-6d4f-df96fc023b23.png)|
|:--|

Vue routerの基本的な構成について説明しました。