【Vue.js】Vue Routerとは

# Vue Routerとは

Vue.jsを使用し、SPA構築を行うための公式プラグインです。

Vue Routerを使用してSPAを構築するとあるページから別のページに移動する際にページ全体の情報を読み込む必要がなくなります。

ページ間で共通の箇所は更新が行われません。共通でない箇所のみ書き換えが行われます。不必要な更新が行われないため、ページの移動をよりスムーズに行うことができます。

# 導入

### インストール
```
npm install vue-router
```
### routes.js
```js:src/router/routes.js
import RecipesPage from '../pages/RecipesPage.vue'
import LoginPage from '../pages/LoginPage.vue'
import RegisterPage from '../pages/RegisterPage.vue'

const routes = [
    {
        path: "/recipes",
        component: RecipesPage,
        name: 'recipe'
    },
    {
        path: "/login",
        component: LoginPage,
        name: 'login'
    },
    {
        path: "/register",
        component: RegisterPage,
        name: 'register'
    },
]

export default routes
```

nameにより、名前からルートを特定します。(名前付きルート)

### index.js

```js:src/router/index.js
import { createRouter, createWebHashHistory } from "vue-router";
import routes from "./routes";

export default createRouter({
    routes,
    history: createWebHashHistory()
})
```
createRouter()により、ルーティング情報を扱うルータの生成が可能になります。

Historyは後ほど説明します。

```js:main.js
import route from './router';

const app = createApp(App);
app.use(route)
app.mount('#app');
```


```js:App.vue
<script setup>
import Navbar from './components/Navbar.vue';
import Footer from './components/Footer.vue'

</script>

<template>
  <Navbar />
  <router-view />
  <Footer />
</template>


```


# ハッシュとヒストリーの違い

Vue Routerのルーティング設定ではアクセスするURLのモードをハッシュモード、ヒストリーモードから選択することができます。

### ハッシュモード

アクセスするURLにハッシュ文字(#)を含めてルーティングします。これによりサーバーへの接続なしで運用ができるため、ヒストリーモードより処理が高速です。

〇デメリット
URLの見た目が悪い。

### ヒストリーモード

通常のURLでルーティングを行います。サーバーへの接続は必須となるため、通信速度はハッシュモードに比べて劣ります。

〇デメリット
HTML5 History APIをサポートしていないブラウザでは使用できない。

# HIstory APIとは

Webページの履歴情報を操作できるJavaScriptの機能です。普段からよく使うブラウザ機能の「戻る」や「進む」に加え、「追加」や「変更」なども操作ができます。

```js:
// 前のページに戻る
window.history.back();
// 次のページへ進む
window.history.forward();
```

# router-link

routes.jsで定義した名前を使うことで簡単にページ遷移が実現します。

```js:Navbar.vue
<a 
  href="#"
  @click.prevent="$event => $router.push('/recipes')" 
  class="mr-5 hover:text-gray-900"
>
  Recipes
</a>
<router-link 
  :to="{ name: 'summary' }"
  class="mr-5 hover:text-gray-900"
  >
  Summary
</router-link>
```

名前付きルートにリンクすためには。router-linkコンポーネントのtoプロパティにオブジェクトを渡します。

https://v3.router.vuejs.org/ja/guide/essentials/named-routes.html

# ルートコンポーネントにプリパティを渡す

コンポーネントで$routeを追加うとコンポーネントとルートの間に密結合が生まれ、コンポーネントが特定のURLでしか使用できないなどの制限できます。

これを使って404エラー画面を作成しました。

https://qiita.com/MK32A/items/309bc5f5b72e4ccbdfeb

参考文献

https://v3.router.vuejs.org/ja/guide/essentials/passing-props.html

# ルートメタフィールド

ルートに任意の情報を添付したい場合、プロパティのオブジェクトを受け入れ、ルートの場所とナビゲーションガードでアクセスできるmetaプロパティを介して実現できます。


これを使って、ログインしていないユーザーにはログイン画面を表示する処理を追加しました。↓

```js:src/router/routes.js
    {
        path: "/recipes",
        component: RecipesPage,
        name: 'recipes',
        // 追加
        meta: {
            auth: true
        }
    },
    {
        path: "/summary",
        component: SummaryPage,
        name: 'summary',
        // 追加
        meta: {
            auth: true
        }
    },
```

```js:src/router/index.js
const router = createRouter({
    routes,
    history: createWebHistory(),
    // linkActiveClass: 'active'
});

router.beforeEach((to, from) => {
    if (to.meta.auth) {
        return { 
            name: "login",
            query: {
                redirect: to.fullPath
            },
        };
    }
});

export default router;
```

https://v3.router.vuejs.org/ja/guide/advanced/meta.html