Lesson 7

ルーティング

Lesson 7 Chapter 1
Vue Router の基本

本チャプターでは、Vue Router を使用した簡単なアプリケーションを作成しながら、Vue Router の基本について学んでいきます。

1. Vue Router とは

Vue Router は Vue のプラグインの 1 つであり、Vue で SPA（シングルページアプリケーション）を構築する際に、ルーティング（ページ遷移）を制御するために使用されます。

Vue Router は Vue の公式ルータとされています（Vue 公式ページ参照）。
このカリキュラムにおいても、この Vue Router を使用して学習を進めていきます。

なお、WEB アプリケーションにおける「ルーティング」とは、ユーザー（ブラウザ側）からのリクエストに合わせて、表示ページ（URL）などを切り替えることをいいます（※）。

ルーティング

Vue Router の担うルーティング機能はページの遷移の制御等に限られていますが、一般的な Web アプリケーションにおけるルーティングでは、ページ遷移の制御のみでなく、 指定された URL と HTTP メソッドにより、データの登録・編集・削除機能など様々な処理が呼び出されます。

Vue Routerを使用することで、ルート（URL）と Vue コンポーネントを紐づけ、リクエストに応じて表示するコンポーネントを切り替えることが簡単に実装できます。

言葉だけでは分かりにくいので、以下、実際に Vue Router を使用した簡単なアプリケーションを作りながら学んでいきましょう。

2. 作成するアプリケーションの内容

ここでは、以下の公式ページ内にあるコードを使用してアプリケーションを作成することにします（※）。

vue_7-1-1.png

Vue Router の公式ページ

Vue Router の公式ページは英語版と日本語版があります。
・英語版：https://router.vuejs.org/
・日本語版：https://v3.router.vuejs.org/ja/

本カリキュラム作成時点では日本語版の公式ページの情報が古いため、このレッスンでは英語版の公式ページを元に説明をしていきます。

公式ページのコードを使用すると、次のようなアプリが作成されます。
Go to Home または Go to About のところをクリックすることでページが切り替わるというものです。

vue_7-1-2.png

3. コードの記述

本セクションでは、CDN を使用してコードを書いていきますので、お手元の作業ディレクトリに、新しく lesson7 フォルダを作成してください。
chapter1-1.html というファイルを追加した上で、<body> タグの中に次のようにコードを記載します。これだけで基本的なルーティングが実装できます。 

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link> | 
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>
</div>

<script>
  const Home = { template: '<div>Home</div>' }
  const About = { template: '<div>About</div>' }

  const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]

  const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes: routes,
  })

  const app = Vue.createApp({})
  app.use(router)
  app.mount('#app')
</script>
全てのコードを表示
chapter1-1.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/vue-router@4"></script>

  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <router-link to="/">Go to Home</router-link> | 
      <router-link to="/about">Go to About</router-link>
    </p>
    <router-view></router-view>
  </div>

  <script>
    const Home = { template: '<div>Home</div>' }
    const About = { template: '<div>About</div>' }

    const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About },
    ]

    const router = VueRouter.createRouter({
      history: VueRouter.createWebHashHistory(),
      routes: routes,
    })

    const app = Vue.createApp({})
    app.use(router)
    app.mount('#app')
  </script>
</body>
</html>

4. コードの内容を確認する

記載したコードの内容について見ていきます。

4-1. Vue Router のインストール

Vue Router をインストールしている部分は、次の 1 行です。

<script src="https://unpkg.com/vue-router@4"></script>

ここでは、CDN を使用して vue-router@4 というように Vue Router のバージョン 4 が指定されています。

・公式ページの説明

CDN を使用したインストール方法については、公式サイトの以下のページで説明がされています。

vue_7-1-3.png

要は、上記赤枠の URL からファイルをダウンロードして使用するということです。
なお、@4 というバージョン指定の場合、メジャーバージョンの 4 のみの指定となり、それ以下のマイナーバージョン等は最新のリリースが適用されることになります（※）。

バージョンの指定について

バージョンは @1.2.3 という振り合いで記載し、左からメジャーバージョン、マイナーバージョン、ビルド番号となります。
バージョンはビルド番号まで指定しないと、指定したメジャーバージョンまたはマイナーバージョン内の最新のリリースを指すようになります。

vue-router@4.0.15 のようにビルド番号まで指定すると、実行時のリリース状況に左右されず常に指定のバージョンを使用することができます。

4-2. ルーターインスタンスの生成

次のところで createRouter 関数を使用して、ルーティング情報を扱うルーターを生成しています。これが Vue Router のベースの機能を提供します。

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: routes,
})

createRouter 関数の引数には 2 つのオプションを指定しています。

No オプション 説明
1 history history モードに関する設定
2 routes 実際のルーティング情報を指定

以下、各オプションについて簡単に説明をしておきます。

① history モードの指定

history モードの指定内容により、表示する URL 形式などが代わります。
以下の 3 種類のモードが用意されています。

No モード 指定値 説明
1 ハッシュモード createWebHashHistory() # 以下にルート情報を表示（特別な設定は不要）
2 HTML5 モード createWebHistory(URL) https://example.com/user のように通常の URL 形式で表示
3 メモリーモード createMemoryHistory() Node 環境や SSR で使用する（本レッスンでは扱わない）。

ハッシュモードは、Vue Router における標準のモードとされており、特別な設定をすることなく簡単に使用できます。ここでは、このハッシュモードを使用しています。
このモードでは https://example.com#/user というように、URL に # が含まれることになります。

HTML5 モードは、URL を https://example.com/user というように、一般的な形式で表示することができますが、サーバに関する設定が必要となります。
このモードは、本レッスン後半の Vite プロジェクトを使用したルーティングで使用します。

② routes（ルート）の指定

routes オプションには、実際のルートを指定します。
このオプションに指定されているルートは、次の部分となります。 

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

上記のように routes には、配列形式で複数のルートを指定します。
path: にはルート（URL）のパスを指定し、component: にはそのパスで表示するコンポーネントを指定します。
つまり、URL / には Home コンポーネントが、URL /about には About コンポーネントが紐づけられていることになります。

4-3. 各ページで表示する子コンポーネント

各ページで表示する子コンポーネントの定義は次の部分です。

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

文字を表示するだけのコンポーネントが、それぞれ 1 行で、計 2 つ定義されています。

4-4. ルートインスタンスのアプリケーションへの適用

生成したルーターインスタンスは、Vue アプリケーションに適用してマウントする必要があります。

const app = Vue.createApp({})
app.use(router)
app.mount('#app')

上記のコードの app.use(router) の部分で、アプリケーションにルートインスタンスを追加しています。
use() は、アプリケーションにプラグインを追加する関数となります。

4-5. 子コンポーネントの表示場所（router-view）

子コンポーネントは、テンプレート内の次の箇所で表示されます。

<router-view></router-view>

この router-view には、アクセスした URL に対応したコンポーネントが表示されることになります。

4-6. ページの切り替えを行う（router-link）

次のところで、ページの切り替えを行うリンクを設定するために router-link コンポーネントを使用しています。

<router-link to="/">Go to Home</router-link> | 
<router-link to="/about">Go to About</router-link>

この router-link コンポーネントの属性 to に、遷移させるパス（URL）を指定することで、ページの切り替えが可能となります。

5. ブラウザで動作確認をする

それでは、ブラウザで表示して動作確認をしてみましょう。
最初に表示されるページは次のとおりです。
# の後の / が、現在表示されている Home コンポーネントのパス（URL）ということです。

vue_7-1-13.png

次に、Go to About をクリックしてページ遷移をしてみましょう。
以下のように、緑枠部分の表示コンポーネントが切り替わったことが確認できます。
URL を見ると # の後に /about が表示され、ページ遷移していることも確認できます。

vue_7-1-14.png

Vue Router の基本的なことは以上のとおりです。
次のチャプターからは、Vite を使用した Vue プロジェクトで Vue Router を使用しつつ、各機能の詳細について掘り下げていきます。

Lesson 7 Chapter 2
Vite プロジェクトに Vue Router を導入する

1. Vite で新しいプロジェクトを作成する

これまで使用してきた Vite プロジェクトの vite-sample に Vue Router を追加しても良いのですが、コンポーネントが増えて見通しが悪くなってきましたので、ここで、新しいプロジェクトを作成しておきましょう。

復習を兼ねて、作成手順から説明していきます。

① 作業フォルダに移動

PowerShell を開いて、プロジェクトを作成するフォルダに移動します。 

PS C:\Users\username> cd C:\vue_lesson
PS C:\vue_lesson>

② Vite プロジェクト生成コマンドの実行

Vite プロジェクトを作成するコマンドを入力します。 

PS C:\vue_lesson> npm create vite@latest

③ プロジェクト名の指定

プロジェクト名は「vite-sample2」と入力して Enter キーを押します。 

PS C:\vue_lesson> npm create vite@latest
? Project name: » vite-sample2

④ フレームワークの選択

フレームワークは「Vue」を選択して Enter キーを押します。

vue_7-2-1.png

⑤ プログラム言語等の選択

JavaScript を選択して Enter キーを押します。

vue_7-2-2.png

⑥ プロジェクト作成の完了

Vue プロジェクトが作成されたら VSCode で開いてください。

vue_7-2-3.png

⑦ npm install の実行

最後に、必要なライブラリをインストールするために、ターミナルを開いて npm install を実行します。

vue_7-2-3-2.png

プロジェクトを作成する時期によって Warnig が出たりしますが、Error さえ出なければ OK としてください。

以上で準備完了です。

2. Vite プロジェクトに Vue Router をインストールする

それでは、作成した Vite プロジェクトに Vue Router をインストールしていきます。
インストール方法は、以下の公式ページに記載されています。

vue_7-2-4.png

ここでは npm を使用しますので、インストールコマンドは次のようになります。 

npm install vue-router@4

VSCode からターミナルを開いて、以下のようにコマンドを実行しましょう。

vue_7-2-5.png

インストールに成功すると、package.json に vue-router が追加されています。

vue_7-2-6.png

3. Vue Router の実装を行う

それでは、Vite プロジェクトに Vue Router のコードを記載していきましょう。
先に「Chapter 1」で作成した CDN のコードと同じ内容のものを、Vite プロジェクトにも追加していきます。

3-1. 子コンポーネントの追加

最初に、各ページで表示するコンポーネントを追加していきます。
以下のように src/components ディレクトリに Home.vue ファイル About.vue ファイルを追加します。

vue_7-2-7.png

それぞれ、次のようにコードを記載します。

src\components\Home.vue
<template>
  <div>Home</div>
</template>
src\components\About.vue
<template>
  <div>About</div>
</template>

CDN のときと同じように、どちらも template のみを持つ簡単なコンポーネントです。

3-2. ルーターの設定ファイルの作成

CDN においては、ルーティングの内容や、ルートインスタンスは、他のコードとともに JavaScript ファイルに記載していました。
Vite プロジェクトにおいては、ルーターの設定ファイルは独立して作成します。

次のように、src ディレクトリの下に router ディレクトリを追加した上で、この router ディレクトリに index.js ファイルを追加します。

vue_7-2-8.png

コードは以下のように記載します。
ファイルのパスは src\router\index.js となっているはずです。

src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

export default router

基本的に CDN で記載したコードと同じ内容になっています。
以下、簡単にコードの内容を確認しておきます。

① ルーターインスタンスの生成

ルーターインスタンスの生成部分は、先ほど CDN で作成したときと同様に設定します。
history モードについては、ここでは createWebHistory() を指定しています。これにより、URL は HTML5 モードとなり # を含めない形で表示できるようになります。 

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

createRouter 関数、createWebHistory 関数は、vue-router のライブラリからインポートしています。

import { createRouter, createWebHistory } from 'vue-router'

② routes（ルート）の指定

こちらは、CDN のときと全く同じですね。

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

コンポーネントは、先に作成したものを以下でインポートしています。

import Home from '../components/Home.vue'
import About from '../components/About.vue'

③ ルートインスタンスのエクスポート

ルートインスタンスは、以下のようにエクスポートして、他のファイルから呼び出せるようにしています。 

export default router

3-3. ルートインスタンスのアプリケーションへの適用（main.js ファイルの修正）

先ほど作成した「ルーターの設定ファイル（src\router\index.js）」は、Vue アプリケーションの全体で使用できるようにマウントをする必要があります。

Vite プロジェクトの場合、アプリケーションインスタンスをマウントしているのは、src ディレクトリ直下にある main.js ファイルのところでした。

以下のように、use() 関数を使用して、ルーターの設定ファイルをプラグインとして追加します。これも CDN のときと同様の記述ですね。

vue_7-2-9.png

コードのテキストを表示
src\App.vue
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

追加部分を確認しておきます。

① ルーターの設定ファイルのインポート

次の 1 行で、ルーターの設定ファイル（src\router\index.js）をインポートしています。 

import router from './router/index'

ファイルのところは './router/index.js' と拡張子を入れても OK です。Vite では、拡張子を省略することができます。

なお、index ファイルの場合はファイル名も省略可能なため、次のようにフォルダのみを指定しても OK となります。 

import router from './router'

② プラグインの適用

以下の .use(router) の部分で、ルートインスタンスをプラグインとして適用しています。 

createApp(App).use(router).mount('#app')

これが、マウントされることにより、アプリケーション全体で Vue Router を使用することが可能となります。

3-4. コンポーネント表示部分を追加（App.vue ファイルの修正）

以上で、Vue Router の基本設定はできましたので、これをブラウザで確認できるようにします。

CDN のときと同じ HTML テンプレートを、以下のように App.vue ファイルに記載します。
デフォルトで表示される HelloWorld コンポーネントはコメントアウトしておきます。

vue_7-2-10.png

全てのコードを表示
src\App.vue
<script setup>
// import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <!-- <HelloWorld msg="Vite + Vue" /> -->
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link> | 
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

追加したテンプレートは次のとおりです。 

  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link> | 
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>

router-link コンポーネントの to 属性に、遷移先のパスを指定しています。
router-view コンポーネントの部分には、アクセスしたパスに対応するコンポーネントが表示されます。

4. ブラウザで動作確認をする

それでは、VSCode のターミナルを開き、npm run dev コマンドでローカルサーバを立ち上げます。
ブラウザから http://localhost:5173/ にアクセスして画面を表示してみましょう（お手元の環境によってはポート番号等が異なる場合がありますので、ターミナルに表示された URL にアクセスするようにしてください）。

vue_7-2-11.png

URL の表示を見てみますと http://localhost:5173 というように # が無いのを確認できます。

次に、Go to About をクリックしてページ遷移をさせます。

vue_7-2-12.png

URL 部分は、http://localhost:5173/about というように、一般的な URL の形式になっていることがわかると思います。

以上、Vite プロジェクトに Vue Router を追加することができました。
次の作業に入るために、ここで、ローカルサーバを停止しておいてください（「ctrl + c」または「q」で停止できます）。

5. Vite プロジェクト作成時に Vue Router を追加する方法

先ほどは、作成済みの Vite プロジェクトに Vue Router を追加する方法を見てきました。
ルーターの設定ファイルの作り方から、Vue アプリケーションへの適用方法まで、おおよその流れが掴めたのではないかと思います。

実は、このようなルーターの設定に関するコードを自動で生成する方法もありますので紹介しておきます。

5-1. create-vue ライブラリ

実行するには、Vue 公式のツールとされている「create-vue ライブラリ」というものを使用します（下記参照）。

vue_7-2-13.png

これも「Vite プロジェクト」を作成するものですが、Vue に特化しており様々な機能が追加できるようになっています。
時に事前のインストールも不要で、Node.js さえ入っていればすぐにプロジェクトを作成できます。

5-2. create-vue でプロジェクト作成

公式ページでは、プロジェクト作成は次のコマンドで実行するとしています。 

> npm init vue@latest

ここでは、Vue のバージョンは 3 で固定したいと思いますので次のコマンドを使用します。 

> npm init vue@3

以下、実際にプロジェクトを作成していきます。

① 作業フォルダに移動

PowerShell を開いて、プロジェクトを作成するフォルダに移動します。 

PS C:\Users\username> cd C:\vue_lesson
PS C:\vue_lesson>

② Vite プロジェクト生成コマンドの実行

Vue プロジェクトを作成するコマンドを入力します。 

PS C:\vue_lesson> npm init vue@3

③ プロジェクト名の指定

プロジェクト名は何でも良いですが、ここでは「vue-router-sample」と入力して Enter キーを押します。

vue_7-2-14.png

④ TypeScript を使用するか否か

ここでは、TypeScript は使用しませんので、No のまま Enter キーを押します。

vue_7-2-15.png

⑤ JSX Support を使用するか否か

JSX Support は JavaScript 内に HTML テンプレートを記載できるようにするものです。
ここでは使用しませんので、No のまま Enter キーを押します。

vue_7-2-16.png

⑥ Vue Router を使用するか否か

ここで「Vue Router」を使用するかどうか聞かれます。
カーソルキーで「Yes」を選択して Enter キーを押します。

vue_7-2-17.png

⑦ その他の選択肢

以下は、全て「No」のままで Enter キーを押していきます。

vue_7-2-18.png

以上の状態になれば、プロジェクトの作成は完了です。

⑧ npm install の実行

プロジェクトが作成されたら vue-router-sample プロジェクトを VSCode で開き、ターミナルを開いて npm install を実行します。

vue_7-2-19.png

プロジェクトを作成する時期によって Warnig が出たりしますが、Error さえ出なければ OK としてください。

以上で準備完了です。

5-3. ローカルサーバを起動してブラウザで表示

それでは npm run dev コマンドを打ってサーバを起動しましょう。

vue_7-2-20.png

ブラウザで表示すると次のようになっています。

vue_7-2-21.png

上図の赤枠のところに「Home」「About」のページ切り替えボタンが付いています。
「About」をクリックしてページを切り替えてみましょう。

以下のように、URL が http://localhost:5173/about に変わり、右側部分のコンポーネントも切り替わっていることが確認できます。
このアプリケーションには、最初から Vue Router が入っているということですね。

vue_7-2-22.png

5-4. 自動生成されたコードを確認する

それでは、自動生成されたコードを確認してみましょう。

① ルーター設定ファイル

ルーター設定ファイル src\router\index.js は、次のようになっています。
routes（ルート）の内容を直接オブジェクト内に書き込んでいるなど、作法の違いはありますが、基本的には、手動で作成した場合と同じ構成になっているのが分かると思います。

vue_7-2-23.png

異なる点を、少し確認しておきます。

・import.meta.env.BASE_URL
createWebHistory() 関数に引数 import.meta.env.BASE_URL が渡されています。
この引数には、ベースとなる URL が渡されます。例えば、開発環境と本番環境では URL が異なるのが一般的ですので、ここで URL を切り替えることが可能となります。

・name: 'home'
routes（ルート）のプロパティに name というものが指定されています。
これは、各ルートに名前を付けるものです。パス（path）の代わりにこの name を使用して遷移ページを指定することもできます（後ほど解説します）。

・component: () => import('../views/AboutView.vue')
コンポーネントの指定箇所で component: () => import('../views/AboutView.vue') という記述がされています。
これは、遅延ローディングルート（※）というものを行うための記述方法です。

遅延ローディングルート

SPA は最初のローディング時に全てのデータを読み込みますが、そのときに、Vue Router に登録している全てのコンポーネントの読み込みも行われるためパフォーマンスが悪くなってしまいます。
これを回避するために使用するのが「遅延ローディングルート」となります。遅延ローディングルートの形式で記述すると、コンポーネントを必要な時のみ読み込むことができ、より効率的な処理が行えるようになります。

② ルートインスタンスのアプリケーションへの適用

次に main.js ファイルを見てみましょう。
これも、若干の書き方の違いはありますが、手動で Vue Router を導入した場合と同じ処理を行っているのがわかると思います。

vue_7-2-24.png

use() 関数を使用して、ルーター設定ファイルをプラグインとして追加しています。
インポート部分は import router from './router' というように、ファイル名 index.js は省略されています。

③ コンポーネント表示部分

最後に、コンポーネントを表示している App.vue ファイルを見てみます。

vue_7-2-25.png

router-link コンポーネント、router-view コンポーネントがパスカルケース（単語の先頭文字を大文字とする記法）になっていますが、基本的には同じような設定をしていることが分かると思います。

このセクションでは「create-vue ライブラリ」を使用して Vue Router を追加する方法を見てきました。
便利なライブラリなので、上手く使いこなしていただければと思います。

次の作業に入るために、ここで、ローカルサーバを停止しておいてください（「ctrl + c」または「q」で停止できます）。

Lesson 7 Chapter 3
ルーターおよび現在ルートへのアクセス

本チャプターでは、各コンポーネントからルーターインスタンスに関する情報にアクセスする場合について見ていきます。

Vue Router には、ルーターインスタンスにアクセスするための $router と、現在のルート情報にアクセスするための $route というグローバルに使用できるオブジェクトが用意されています。

No オブジェクト 説明
1 $router（useRouter） ルーターインスタンスへのアクセス
2 $route（useRoute） 現在のルートへのアクセス

これを利用することで各コンポーネントから、ルーターインスタンスに関する情報にアクセスすることができます。

なお、$router および $route は、setup() 関数内からはアクセスできないため、代わりに、useRouter および useRoute を使用することになります。

以下、それぞれについて見ていきます。

1. 現在ルートへのアクセス（$route または useRoute）

まず、現在のルートへのアクセスを提供する $route（useRoute） について見ていきます。

1-1. $route（useRoute）から取得できる情報

$route（または useRoute）から取得できるプロパティには、次のようなものがあります。

No プロパティ 説明
1 name 現在ルートの name を取得
2 path 現在ルートの path を取得
3 params 現在ルートの保有するパラメータを取得
4 fullPath 現在のルートのフルパスを取得
5 query 現在のルートの URL のクエリパラメータを取得

1-2. 具体例で確認する

前のチャプターで作成した vite-sample2 プロジェクトにコードを追加していきます。

① Home.vue コンポーネントの修正

まず、Home.vue コンポーネントに、次の 1 行を加えてください。

vue_7-3-1.png

$route の箇所に赤波線で警告が出ていますが、動作には問題ないため、一旦このままで OK です。

修正後のコードは次のようになります。

src\components\Home.vue
<template>
  <div>Home</div>
  <div>現在のルートは {{ $route.path }} です。</div>
</template>

$route で現在のルートのオブジェクトを取得しています。
このオブジェクトのプロパティ path から、現在ルートのパスが取得されます。

② About.vue コンポーネントの修正

About.vue コンポーネントにも同様の修正をします。

vue_7-3-2.png

修正後のコードは次のようになります。

src\components\About.vue
<template>
  <div>About</div>
  <div>現在のルートは {{ $route.path }} です。</div>
</template>

③ 不要なコードの削除

動作には関係のないところですが、コードが煩瑣にはるため、不要なコードを削除しておきます。

まず、App.vue コンポーネントについて、次の赤枠部分を削除します。

vue_7-3-3.png

修正後のコードを表示

次のように必要な事項のみが残りました。

vue_7-3-4.png

テキストは次のとおりです。

src\App.vue
<script setup>
</script>

<template>
  <p>
    <router-link to="/">Go to Home</router-link> | 
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>
</template>

<style scoped>
</style>

次に、src\components\HelloWorld.vue コンポーネント自体を削除します。
左側のエクスプローラーから HelloWorld.vue ファイルを右クリックして、最後の方にある項目「Delete」を選択してください。

vue_7-3-5.png

④ ブラウザで確認する

それでは、ローカルサーバを立ち上げてブラウザで開いてみましょう。
コンポーネントに追加した <div>現在のルートは {{ $route.path }} です。</div> の部分が表示されていることを確認できます。

vue_7-3-6.png

次に、Go to About ボタンをクリックします。
以下のように、現在のルート /about が取得され、表示されていることが確認できました。

vue_7-3-7.png

1-3. useRoute を使用する

続いて、useRoute を使用して、script setup 構文内で使用してみましょう。 vite-sample2 プロジェクトを更に修正していきます。

① Home.vue コンポーネントの修正

Home.vue コンポーネントを次のように修正します。

vue_7-3-8.png

全てのコードをテキストで表示
src\components\Home.vue
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.path)
</script>

<template>
  <div>Home</div>
  <div>現在のルートは {{ route.path }} です。</div>
</template>

useRoute は、vue-router からインポートします。 基本的には、変数（ここでは route）に入れて使用します。 

import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.path)

console.log(route.path)の部分で Console 画面にパスを出力するようにしています。

また、template のところは、$route を route に修正しています（下記）。
これにより、script 部分で定義した route オブジェクトを使用して、画面に path を表示することになります。 

<div>現在のルートは {{ route.path }} です。</div>

② About.vue コンポーネントの修正

続いて、About.vue コンポーネントも修正します。
こちらでは、色々なパターンを表示するようにしてみます。

vue_7-3-9.png

全てのコードをテキストで表示
src\components\About.vue
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.name)
console.log(route.path)
console.log(route.query)
</script>

<template>
  <div>About</div>
  <div>現在のルートは {{ $route.path }} です。</div>
  <div>現在のルートは {{ route.path }} です。</div>
  <div>現在のルートは {{ useRoute().path }} です。</div>
</template>

useRoute のインポート部分は Home.vue と同じです。
以下のところで、Console 画面に name，path，query の各プロパティ値を表示するようにしています。 

console.log(route.name)
console.log(route.path)
console.log(route.query)

template の以下の部分では、様々なパターンで path を表示するようにしています。 

<div>現在のルートは {{ $route.path }} です。</div>
<div>現在のルートは {{ route.path }} です。</div>
<div>現在のルートは {{ useRoute().path }} です。</div>

最後の 1 行は、script 内でインポートした useRoute() 関数をそのままテンプレートで使用する例となります（一般的ではないですが、これでも表示はできるという例です）。

③ App.vue コンポーネントの修正

'/about' パスにクエリパラメータを追加するため、App.vue コンポーネントに以下の赤枠部分を追加します。

vue_7-3-10.png

全てのコードをテキストで表示
src\App.vue
<script setup>
</script>

<template>
  <p>
    <router-link to="/">Go to Home</router-link> | 
    <router-link to="/about?foo=1">Go to About</router-link>
  </p>
  <router-view></router-view>
</template>

<style scoped>
</style>

以下の router-link をクリックすると、パスは /about、クエリパラメータは foo=1 の URL に遷移することになります。

<router-link to="/about?foo=1">Go to About</router-link>

④ ルーターの修正

ルート（routes）に name プロパティを追加するため、src\router\index.js ファイルに以下の赤枠部分を追加します。

vue_7-3-11.png

全てのコードをテキストで表示
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

const routes = [
  { path: '/', component: Home },
  { name: 'aboutName', path: '/about', component: About },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

export default router

これで、パス '/about' に、name プロパティ 'aboutName' が追加されました。

⑤ ブラウザで確認する

それでは、ブラウザで開いてみましょう。
開発者用画面を開いて、Console も表示しておいてください。

まず、ブラウザに「現在のルートは / です。」と変わらず表示されることが確認できます。
また、Console 画面には console.log(route.path) の部分が正しく出力できていることも確認できます。

vue_7-3-12.png

次に、Go to About ボタンをクリックします。

vue_7-3-13.png

ブラウザには「現在のルートは / です。」の文言が 3 行分表示されています。
これにより、template で指定した $route.path，route.path，useRoute().path の 3 つのパターンは全て同じ結果を返すことが確認できます。

また、右側の Console には、name，path，query の各プロパティ値が順に表示されていることが分かると思います。

2. ルーターへのアクセス（$router または useRouter）

次に、ルーターへのアクセスを提供する $router（useRouter） について見ていきます。

2-1. $router（useRouter）で使用できるメソッド

ルーター（$router または useRouter）から使用できるメソッドやプロパティとして、主に次のようなものがあります（詳細は公式ページを参照）。

No メソッド／プロパティ 説明
1 push メソッド 指定したページに遷移する
2 beforeEach メソッド ルートの遷移前のフック（ナビゲーションガード）
3 beforeResolve メソッド ルートの遷移前のフック（その他のナビゲーションガードが全て解決した後に実行）
4 afterEach メソッド ルートの遷移後のフック（ナビゲーションガード）
5 currentRoute プロパティ 現在のルートを取得

No. 2 から No. 4 はナビゲーションガードというもので、ルートの遷移時に行いたい処理を登録するために使用します。こちらは、後ほど別途解説いたします。

2-2. 具体例で確認する

ここでは、push メソッドを使用しながら、$route または useRoute の使用方法を確認していきます。

push メソッドは、push('/about') のように引数に遷移先のルートを指定します。 ルートの指定の方法には、次のようなパターンがあります。 

// 文字列パス
router.push('/users/eduardo')

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

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

// 結果的に /register?plan=private になる query
router.push({ path: '/register', query: { plan: 'private' } })

① App.vue コンポーネントの修正

vite-sample2 プロジェクトの App.vue コンポーネントに、次の赤枠部分を追加してください。

vue_7-3-14.png

全てのコードを表示
src\App.vue
<script setup>
</script>

<template>
  <p>
    <router-link to="/">Go to Home</router-link> | 
    <router-link to="/about?foo=1">Go to About</router-link>
  </p>
  <p>
    <button @click="$router.push('/')">ホームへ</button>
    <button @click="$router.push('/about')">アバウトへ</button>
  </p>
  <router-view></router-view>
</template>

<style scoped>
</style>

追加したコードは次の部分です。
1 つ目のボタンを押すと / へ、2 つ目のボタンを押すと /about に遷移することになります。 

<p>
  <button @click="$router.push('/')">ホームへ</button>
  <button @click="$router.push('/about')">アバウトへ</button>
</p>

② ブラウザで確認する

それでは、ブラウザで開いてみましょう。
次のように「ホームへ」および「アバウトへ」ボタンが追加されています。

vue_7-3-15.png

それでは「アバウトへ」ボタンをクリックします。
以下のように、ページ遷移することが確認できれば OK です。

vue_16-3-7.png

1-3. useRoutes を使用する

続いて、script setup 構文内で useRoutes を使用してみましょう。

① App.vue コンポーネントの修正

App.vue コンポーネントに以下の赤枠部分を追加します。

vue_7-3-17.png

全てのコードをテキストで表示
src\App.vue
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goToHome = () => router.push('/')
const goToAbout = () => router.push('/about')
</script>

<template>
  <p>
    <router-link to="/">Go to Home</router-link> | 
    <router-link to="/about?foo=1">Go to About</router-link>
  </p>
  <p>
    <button @click="$router.push('/')">ホームへ</button>
    <button @click="$router.push('/about')">アバウトへ</button>
  </p>
  <p>
    <button @click="goToHome">goToHome メソッド</button>
    <button @click="goToAbout">goToAbout メソッド</button>
  </p>
  <router-view></router-view>
</template>

<style scoped>
</style>

useRouter は、vue-router からインポートします。 基本的には、変数（ここでは router）に入れて使用します。 

import { useRouter } from 'vue-router'
const router = useRouter()

次のところで、useRouter を使用して push メソッドを実行しています。 

const goToHome = () => router.push('/')
const goToAbout = () => router.push('/about')

メソッドを実行するボタンは、次のように指定しています。 

<button @click="goToHome">goToHome メソッド</button>
<button @click="goToAbout">goToAbout メソッド</button>

② ブラウザで確認する

それでは、ブラウザで開いてみましょう。
以下の赤枠のところに、ボタンが 2 つ追加されています。

vue_7-3-18.png

次に「goToAbout メソッド」ボタンをクリックしてみましょう。
以下のように、正しく画面遷移できれば OK です。

vue_7-3-19.png

本チャプターでは、$route と $router の使い方について学習しました。
こちらは、後のチャプターでも使用しますので、使い方を把握しておくようにしておきましょう。

Lesson 7 Chapter 4
動的ルートマッチング

1. 動的ルートマッチングとは

これまでのルーティングのルート（path）には '/' や '/about' のような固定値を設定していました。
ここでは、固定値でない「動的なルート」、例えば、ユーザーごとに個別のページを表示するために、ルートにユーザーIDを含めるような場合について見ていきます。

動的なルート設定には、以下のようなパターンがあります。

No パターン 指定例 説明
1 パラメータ指定 '/user/:id' :id のところにユーザー ID を入れる
2 正規表現を使用 '/user/:id(\\d+)' :id は 1 文字以上の数値であること
3 部分一致（*） '/user-:afterUser(.*)' '/user-' から始まる任意のものにマッチする（これも正規表現です）

それぞれの使用方法について、以下、見ていきましょう。

2. パラメータ指定

2-1. 定型例

まずは、シンプルなコードで、パラメータを使用した動的ルートマッチングの構造を見ておきましょう。

① routes（ルート）の指定

下記のパラメータ名は id です。コロン（:）を使用して :id のように指定します。 

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

パラメータ '/user/:id' には、'/user/1'、'/user/2' のようなパスがマッチします。

② 親コンポーネントの指定

router-link で指定するルートは `/user/${userId}` の部分です。 

<script setup>
import { ref } from 'vue'
const userId = ref(1)
</script>

<template>
  <router-link :to="`/user/${userId}`">UserPage</router-link>
  <router-view></router-view>
</template>

上記の場合、${userId} には 1 が代入されますので、遷移先のルートは '/user/1' となります。

③ 子コンポーネントの指定

$route オブジェクトを使用して、現在のルート情報を取得しています。

<template>
  <p>User {{ $route.params.id }}</p>
</template>

ルートで設定したパラメータ :id は、$route オブジェクトの params プロパティから取得することができます。 ここでは、{{ $route.params.id }} の値は 1 となり、コンポーネントには User 1 という文字列が表示されることになります。

2-2. 具体例で確認する

vite-sample2 プロジェクトのコードを修正していきます。

① User.vue コンポーネントの追加

次のように、src\components ディレクトリに User.vue コンポーネントを追加します。

vue_7-4-1.png

追加したコードは次のとおりです。

src\components\User.vue
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<template>
  <p>User {{ route.params.id }}</p>
</template>

template 側で $route オブジェクトを使用すれば script タグ内の記載は不要となりますが、ここでは useRoute を使用する形にしています。

$route を使用した場合のコードを表示

もちろん、次のように記載しても構いません。

src\components\User.vue
<template>
  <p>User {{ $route.params.id }}</p>
</template>

② ルーターの修正

src\router\index.js ファイルに、新たなルート /user/:id を追加して、既存のルートの name プロパティも同じ形式に修正しておきます（下図の赤枠が追加・修正部分）。

vue_7-4-2.png

全てのコードをテキストで表示
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'

const routes = [
  { name: 'root', path: '/', component: Home },
  { name: 'about', path: '/about', component: About },
  { name: 'user', path: '/user/:id', component: User },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

export default router

③ App.vue コンポーネントの修正

以下のように、App.vue コンポーネントを全面的に修正します（赤枠部分）。
なお、緑枠のコメントアウト部分は、必要と思われる方はコメントアウトのまま残しておいて差し支えありません。こちらでは、コードの見通しの兼ね合いから、以後削除します。

vue_7-4-3.png

修正後のコードは次のとおりです（コメントアウト部分も削除しています）。

src\App.vue
<script setup>
import { ref } from 'vue'
const userId = ref(1)
</script>

<template>
  <div>ユーザーID: <input v-model="userId"/></div>
  <p>
    <router-link to="/">Home</router-link> | 
    <router-link to="/about">About</router-link> | 
    <router-link :to="`/user/${userId}`">UserPage</router-link>
  </p>
  <router-view></router-view>
</template>

<style scoped>
</style>

User.vue コンポーネントを表示すためのリンクは次のところとなります。 

<router-link :to="`/user/${userId}`">UserPage</router-link>

また、userId を変更できるように、input ボックスを 1 つ追加しています。 

<div>ユーザーID: <input v-model="userId"/></div>

④ ブラウザで動作確認する

それでは、npm run dev コマンドでローカルサーバを立ち上げ、ブラウザで開いてみましょう。

vue_7-4-4.png

UserPage リンクをクリックしましょう。

次のように、動的な URL /user/1 が作成されていることが確認できるはずです。
また、User.vue コンポーネントの User {{ route.params.id }} の部分が「User 1」というように、正しく表示されていることも確認してください。

vue_7-4-5.png

次に「ユーザーID」入力ボックスに、8 と入力して「UserPage」リンクをクリックしてみてください。

すると、次のように URL /user/8 に遷移して、コンポーネントの表示もユーザー ID に応じたものに切り替わります。

vue_7-4-6.png

続いて「ユーザーID」入力ボックスに、abc と入力して「UserPage」リンクをクリックしてみましょう。

特に何らの制限をしていないため、以下のように、/user/abc という URL が生成され、その内容で表示が切り替わっています。

vue_7-4-7.png

本来であれば、ID などは数字のみに限定したいところです。
次のセクションでは、ユーザー ID の入力値を「数字」のみに限定し、それ以外の URL の場合は Home 画面に戻るようにする実装を行っていきます。

3. 正規表現（部分一致を含む）

3-1. 正規表現とは

ここで、簡単に正規表現について説明をしておきます。
あくまで触りの部分のみの紹介ですので、詳しくは mdn web docs 正規表現 等を参照してください。

① 正規表現文字

正規表現とは文字列の組合せパターンを表現する方法となります。
例えば、\d という正規表現文字は 1 つの数字を表し、具体的には 0 から 9 のいずれかの数字と合致する文字列ということになります。

ここで全ての正規表現文字は紹介できませんが、よく使用するものをピックアップすると次のとおりです（詳しくは mdn web docs 文字クラス 参照）。

No 文字 説明
1 [0-9] 0 から 9 までの数字のいずれかに一致（\d と同じ）。
なお、[1-3] とした場合は、'1'，'2'，'3' のいずれかの数字に一致。
2 [a-z] a から z までの半角アルファベット小文字に一致。
なお、[c-f] とした場合は、'c'，'d'，'e'，'f' のいずれかに一致。
3 [A-Z] A から Z までの半角アルファベット大文字に一致。
4 . あらゆる文字（1文字分）に一致（ただし、改行文字を除く）。
5 \d 0 から 9 までの数字のいずれかに一致（[0-9] と同じ）。
6 \w アンダースコアを含むあらゆる半角英数字に一致（[A-Za-z0-9_] と同じ）。
7 \s 半角スペース 1 文字に一致。
8 \t タブに一致。
9 \n 改行（LF）に一致。
改行が（CRLF）の場合は \r\n を使用する。

さて、数字の正規表現 \d を使用して郵便番号を表すと \d\d\d-\d\d\d\d となります。

\d\d\d-\d\d\d\d

途中に出てくるハイフン - は正規表現ではないので、そのまま文字として認識されます。

② 数量詞

しかし、\d\d\d というような表現は、少々冗長です。
このように、数字を 3 回数分繰り返し使用する場合は、その直後に、波括弧を使用して \d{3} の振り合いで繰り返し回数を指定できます。
そうすると、郵便番号の正規表現は、次のように記述できます。 

\d{3}-\d{4}

ここで使用した波括弧は、正規表現の数量詞と呼ばれるものです。

よく使用する数量詞を挙げると次のとおりです（詳しくは mdn web docs 数量詞 参照）。

No 文字 説明
1 * 直前の文字の 0 回以上の繰り返し。 例えば、\d* は、''，'2'，'6868'，'987654' など、空文字を含むあらゆる数字のパターンに一致する。
2 + 直前の文字の 1 回以上の繰り返し。 例えば、\d+ は、'2'，'6868'，'987654' などのあらゆる数字のパターンに一致する（空文字は含まない）。
3 ? 直前の文字の 0 回または 1 回に一致。
4 {n} 直前の文字の n 回繰り返し。
5 {n, m} 直前の文字の n 回以上、m 回以下の繰り返し。

簡単ですが、以上、正規表現についての説明でした。
正規表現は、様々な場面で使用することになりますので、ご自身で色々と調べつつ理解を深めていただければと思います。

3-2. 正規表現を使用した動的ルートマッチングの定型例

正規表現を使用した動的ルートマッチングの定型例を見ておきましょう。
なお、正規表現は「パラメータに対してのみ」適用でき、そのパラメータの直後に丸括弧 () を使用して指定します。

① パラメータを数値のみとする

下記のパラメータは id です。
後ろに続く (\\d+) は、パラメータ id の文字列形式を「1 文字以上の数字のみ」に限定する正規表現となります。 

const routes = [
  { path: '/user/:id(\\d*)', component: User }
]

なお、「1 文字以上の数字」の正規表現は、本来 \d+ ですが、JavaScript の文字列にそのまま \ という文字は使用できないため、これをエスケープ処理する \ が更に 1 つ追加されている形となっています。

② 部分一致

使用しているパラメータは afterUser です（名前は何でも OK です）。
後ろに続く (.*) は、パラメータ afterUser の文字列形式を「0 文字以上の任意の文字」とする正規表現となります。なお、. はあらゆる文字に一致する正規表現文字です。 

const routes = [
  { path: '/user-:afterUser(.*)', component: User }
]

つまり、上記の指定は /user- から始まる全てのルートに一致することになります。

③ 全てのルートに一致

次に、全てのルートに一致する例です。
使用しているパラメータは pathMatch です（名前は何でも OK です）。
後ろに続く (.*) は、パラメータ pathMatch の文字列形式を「0 文字以上の任意の文字」とする正規表現となります。 

const routes = [
  { path: '/:pathMatch(.*)', component: Home }
]

なお、本カリキュラムでは触れていませんが、path を配列に分割するような場合には、次のように記述します。 

const routes = [
  { path: '/:pathMatch(.*)*', component: Home }
]

/:pathMatch(.*) の後ろに * を追加して繰り返し可能としています。

3-3. 具体例で確認する

vite-sample2 プロジェクトの src\router\index.js ファイルを修正します。

① ルーターの修正

src\router\index.js ファイルに、新たなルート /:pathMatch(.*)* を追加します。
どのルートにも適合しなかった場合に、最後に適用するルートとなります。

vue_7-4-8.png

全てのコードをテキストで表示
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'

const routes = [
  { name: 'root', path: '/', component: Home },
  { name: 'about', path: '/about', component: About },
  { name: 'user', path: '/user/:id(\\d+)', component: User },
  { name: 'notFound', path: '/:pathMatch(.*)*', component: Home },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

export default router

② Home.vue コンポーネントの修正

src\components\Home.vue ファイルを微修正して、Home コンポーネント表示時に、どのルートが適用されたかを分かるようにしておきます。

vue_7-4-9.png

全てのコードをテキストで表示
src\components\Home.vue
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.path)
</script>

<template>
  <div>Home</div>
  <div>現在のルート名は {{ route.name }} です。</div>
</template>

これで Home 画面には、useRoute の name プロパティが表示されることになります。

③ ブラウザで動作確認する

それでは、ブラウザで開いて確認してみましょう。
ユーザー ID 入力ボックスに、abc と入力し「UserPage」リンクをクリックしてください。

vue_7-4-10.png

すると、今回は、User.vue コンポーネントは表示されず、Home.vue コンポーネントが表示されました。
これは、パスを /user/:id(\\d+) というように、正規表現を使用して id 部分を「数字のみ」に限定したことによります。
また、他のどのルートにも合致しなかったため、最後の /:pathMatch(.*)* が適用されていることも確認できます。
その他にも、色々なユーザー ID を入力して、ご自身で動作確認をしてみてください。

動的ルートマッチングの解説については以上となります。

Lesson 7 Chapter 5
プログラムによるナビゲーション

Vue Router では、$router（useRouter）を使用して、ナビゲーション（ページ遷移）に関するプログラムを記述することができます。

1. ナビゲーションに使用できるメソッド

$router（useRouter）で使用できるナビゲーションのメソッドとして、主に次のようなものがあります。

No メソッド／プロパティ 説明
1 push メソッド 指定したページに遷移する。
2 replace メソッド ページの URL を上書きする（履歴を残さない）。
3 go メソッド URL の履歴に従って、指定した数値だけページを進める。
マイナス値を指定すると数値分戻る。
4 forward メソッド URL の履歴に従って、1 つページを進める。
5 back メソッド URL の履歴に従って、1 つページを戻る。

1-1. push メソッド

push メソッドは、以前のチャプターでも使用しました。
ルートの指定の方法には、次のようなパターンがあります。 

// 文字列パス
router.push('/users/eduardo')

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

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

// 結果的に /register?plan=private になる query
router.push({ path: '/register', query: { plan: 'private' } })

// 結果的に /about#team となる hash
router.push({ path: '/about', hash: '#team' })

単純に path を引数に設定するのみでなく、オブジェクト形式で複数のパラメータを渡すこともできます。

① オブジェクトを使用した例

これまでは、router.push('about') のような文字列で指定してきましたが、次のようにオブジェクト形式を使用することもできます。 

router.push({ path: 'about' })

② 名前付きルートを使用した例

また、動的ルートマッチングを使用してパラメータに id などを含む場合は、次のように name と params を組み合わせて指定することができます。 

router.push({ name: 'user', params: { id: userId } })

これは、次の指定と基本的に同じことになります。 

router.push({ path: `/user/${userId}` })

なお、path を指定した場合は、遷移時にルーターで指定した正規表現も適用されます（名前付きルートの場合は正規表現が適用されないことに注意が必要です）。

1-2. replace メソッド

replace メソッドは、基本的に push メソッドと同じように指定したページを表示するものです。 ただし、push メソッドとは異なり、ページ遷移の履歴（History）を残さず、現在のページ（履歴）を上書きします。
そのため、ブラウザの「戻る」ボタンを押しても書き換え前のページには戻らず、それ以前のページまで戻ることになります。

replace メソッドの使用方法は、push メソッドと同じです。

① 文字列パスを使用した例

router.replace('about')

② オブジェクトを使用した例

router.replace({ path: 'about' })

③ 名前付きルートを使用した例

router.replace({ name: 'user', params: { id: userId } })

1-3. go メソッド

go メソッドは、URL の履歴に従って、指定した数値だけページを進めます。
マイナスの数値を指定すると、その数値分、履歴に従って戻ります。 

// 1 レコード進む（router.forward() と同じ）
router.go(1)

// 1 レコード戻る（router.back() と同じ）
router.go(-1)

// 3 レコード進む

1-4. forward メソッド

forward メソッドは、URL の履歴に従って、1 つページを進めます。

// 1 レコード進む
router.forward()

1-5. back メソッド

back メソッドは、URL の履歴に従って、1 つページを戻ります。

// 1 レコード戻る
router.back()

2. ナビゲーションを使用した具体例

それでは、実際にコードを書いて動作確認をしてみましょう。

① App.vue コンポーネントの修正

App.vue コンポーネントに以下の赤枠部分を追加します。

vue_7-5-1.png

全てのコードをテキストで表示
src\App.vue
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const userId = ref(1)
const router = useRouter()
const pushByPath = () => router.push({ path: `/user/${userId.value}` })
const pushByName = () => router.push({ name: 'user', params: { id: userId.value }})
const replace = () => router.replace({ path: `/user/${userId.value}` })
const go = () => router.go(-2)
const forward = () => router.forward()
const back = () => router.back()
</script>

<template>
  <div>ユーザーID: <input v-model="userId"/></div>
  <p>
    <router-link to="/">Home</router-link> | 
    <router-link to="/about">About</router-link> | 
    <router-link :to="`/user/${userId}`">UserPage</router-link>
  </p>
  <p>
    <button @click="pushByPath">User(path)</button>
    <button @click="pushByName">User(name)</button>
    <button @click="replace">User(replace)</button>
    <button @click="go">2つ戻る</button>
    <button @click="forward">進む</button>
    <button @click="back">戻る</button>
  </p>
  <router-view></router-view>
</template>

<style scoped>
</style>

② About.vue コンポーネントの修正

今回の動作とは関係ありませんが、コードの整理のため src\components\About.vue ファイルを修正しておきます。 単純に、以下の赤枠の部分を削除するだけです（コメントアウトとしても差し支えありません）。

vue_7-5-2.png

全てのコードをテキストで表示
src\components\About.vue
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<template>
  <div>About</div>
  <div>現在のルートは {{ route.path }} です。</div>
</template>

③ ブラウザで確認する

それでは、ブラウザで開いてみましょう。
次のようにボタンが 6 個追加されていると思います。

vue_7-5-3.png

それでは、①「About」をクリックして、続いて②「User(name)」ボタンをクリックしてみます。 この「User(name)」は、push メソッドで「名前付きルート」を指定したメソッドを実行するものでした。

ページ遷移を経て、次のように正しく User.vue コンポーネントが表示されれば OK です。

vue_7-5-4.png

ここで「戻る」ボタンを押してみましょう。これは、back メソッドを実行するものでした。
すると、ページの履歴を 1 つ戻り、次のように About ページが表示されます。

vue_7-5-5.png

続いて「User(replace)」ボタンを押してみます。ここで実行される replace メソッドは、ページの履歴を残さずに履歴を上書きするものでした。
ボタンを押すと、次のように、User.vue コンポーネントに切り替わります。

vue_7-5-6.png

ここで「戻る」ボタンを押してみましょう。
すると、次のように About ページではなく、その 1 つ前の Home ページまで戻ります。

vue_7-5-7.png

About ページの履歴が無くなっていることから、replace メソッドがページを上書きしているということが、実際に確認できたことと思います。

その他のボタンについてはここでは触れませんが、ご自身で色々と試してみて、挙動を確認してみてください。

3. リダイレクト

リダイレクトとは、ある URL にアクセスがあった場合に、別の URL に転送する仕組みのことをいいます。
一般的な例で言うと、Web サイトにおいて URL の変更があった場合に、古い URL へのアクセスを新しい URL に転送するようなときに使われています。

3-1. 静的リダイレクト

Vue Router でのリダイレクトは次のように指定します。

① パスでリダイレクト先を指定する例

パス /home にアクセスがあった場合に、パス / へ転送する例です。 

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

転送先のパスは redirect: で指定します。 画面に表示するのは転送先のコンポーネントなので、ここでは component: の指定は不要となります。

② 名前付きルートでリダイレクト先を指定する例

redirect: のところに名前付きルートを指定することもできます。 

const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

③ リダイレクトの具体例

vite-sample2 プロジェクトの src\router\index.js ファイルにつき、下図の赤枠部分を修正します。 component: Home を redirect: '/' に書き換えただけです。

vue_7-5-8.png

全てのコードをテキストで表示
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'

const routes = [
  { name: 'root', path: '/', component: Home },
  { name: 'about', path: '/about', component: About },
  { name: 'user', path: '/user/:id(\\d+)', component: User },
  { name: 'notFound', path: '/:pathMatch(.*)*', redirect: '/' },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

export default router

また、今回の動作には関係ありませんが、App.vue ファイルの不要なコード（下記赤枠部分）を削除しておきます。 もちろん、コメントアウトのまま残しておいても構いません。

vue_7-5-9.png

削除後のコードをテキストで表示
src\router\index.js
<script setup>
import { ref } from 'vue'
const userId = ref(1)
</script>

<template>
  <div>ユーザーID: <input v-model="userId"/></div>
  <p>
    <router-link to="/">Home</router-link> | 
    <router-link to="/about">About</router-link> | 
    <router-link :to="`/user/${userId}`">UserPage</router-link>
  </p>
  <router-view></router-view>
</template>

<style scoped>
</style>

ローカルサーバを立ち上げ、ブラウザで開いてみましょう。
ページ遷移を確認するため、あらかじめ「About」リンクをクリックして About ページを表示させておきます。

vue_7-5-10.png

それでは、リダイレクトの確認をします。
ユーザー ID 入力欄に「abc」というように数字以外の文字を入力した上で「UserPage」リンクをクリックしてください。

vue_7-5-11.png

ユーザー ID が数字でない場合は、ルート名 'notFound' に遷移しますが、リダイレクトの設定を行っているので、ルート名 'root' にそのまま転送されます。

また、リダイレクトの設定以前は、URL 欄には /user/abc と無効なパスがそのまま表示されていましたが、リダイレクトされているためルートの URL に遷移していることも確認できます。

3-2. 動的リダイレクト

次に、動的リダイレクトについてです。
リダイレクト先の URL に含まれる情報を使用して、リダイレクト先のパスなどを指定することができます。

① リダイレクト先のパスを動的に指定する例

パス /about/:id にアクセスがあった場合に、パス /user/:id へ転送する例です。 

const routes = [
  {
    path: '/about/:id',
    redirect: to => {
      return { path: `/user/${to.params.id}` }
    },
  },
]

redirect: の引数 to は、遷移先に指定したルート（$route）の情報を受け取ります。
/about/:id の id 部分に指定された値は、params プロパティから取得できますので、これを使用して、遷移先のパスを `/user/${to.params.id}` と指定しています。

② パスで指定した内容をクエリパラメータを追加する例

次に、パス /search/foo でアクセスがあった場合に、URL の一部（ここでは foo の部分）をパスのクエリパラメータに変換して search?q=foo というように変換する例です。 

const routes = [
  {
    path: '/search/:searchText',
    redirect: to => {
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
]

実行していることは ① の場合とほぼ変わらず、取得した params の値を転送先のパスに含めるかクエリパラメータに含めるかの違いがある程度です。

③ 動的リダイレクトの具体例

vite-sample2 プロジェクトの src\router\index.js ファイルに下図の赤枠部分を追加してください。

vue_7-5-12.png

全てのコードをテキストで表示
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'

const routes = [
  { name: 'root', path: '/', component: Home },
  { name: 'about', path: '/about', component: About },
  { name: 'user', path: '/user/:id(\\d+)', component: User },
  {
    path: '/about/:id',
    redirect: (to) => {
      return { name: 'user', params: { id: to.params.id } }
    },
  },
  { name: 'notFound', path: '/:pathMatch(.*)*', redirect: '/' },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

export default router

記載している内容は「① リダイレクト先のパスを動的に指定する例」と同じですが、ここでは名前付きルートでリダイレクト先を指定しています。

それでは、ブラウザで動作確認をしてみましょう。
下図のように、URL の欄の末尾に直書きで /about/123 と追加してください。

vue_7-5-13.png

カーソルを当てたまま Enter キーを押してページを遷移させてみましょう
次のように /user/123 に遷移していれば成功です。

vue_7-5-14.png

4. エイリアス

Vue Router のエイリアスを使用することで、パス（path）に別名を付けることができます。
例えば、ルートパス / に別名 /home を付けた場合、どちらのパスからも同じコンポーネントにアクセスすることができるようになります。

4-1. 定型例

コードの定型例は、次のようになります。 

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

上記の場合、パス /home にアクセスすると、Homepage コンポーネントが表示されます。このときに、URL のパスも /home のままとなります。

4-2. 具体例

早速、コードを書いて確認してみましょう。

① ルーターの修正

vite-sample2 プロジェクトの src\router\index.js ファイルに赤枠部分を追加します。

vue_7-5-15.png

全てのコードをテキストで表示
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'

const routes = [
  { name: 'root', path: '/', component: Home, alias: '/home' },
  { name: 'about', path: '/about', component: About },
  { name: 'user', path: '/user/:id(\\d+)', component: User },
  {
    path: '/about/:id',
    redirect: (to) => {
      return { name: 'user', params: { id: to.params.id } }
    },
  },
  { name: 'notFound', path: '/:pathMatch(.*)*', redirect: '/' },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

export default router

root のパス / に、別名 /home を追加しているだけです。

② ブラウザで動作確認をする

それでは、ブラウザで動作確認をしてみましょう。
ページ遷移を確認するため、あらかじめ「About」リンクをクリックして About ページを表示させておきます。

vue_7-5-16.png

下図のように、URL の欄の末尾に直書きで /home と入力して Enter キーを押してください。

vue_7-5-17.png

以下のように、URL は /home のままで、Home コンポーネントが表示されていることが確認できれば OK です。

vue_7-5-18.png

Lesson 7 Chapter 6
ネストされたルート

1. 定型例

ネストされたルートとは、パスが入れ子の構造となったルートのことをいいます。
具体的には、例えば、/user/1 というパスに対して、/user/1/profile や /user/1/posts というように子となるパスがあるような場合です。

この場合のルート（routes）の記述は次のようになります。 

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
]

子となるルートは、children というプロパティに、配列で記載します。
子のルートには、path、component、name、query、children など親のルートと同様のプロパティを設定することができます。

なお、子のルートのパスは、親のルートからの相対パスを指定することになり、頭に / は不要です。

2. 具体例

早速、コードを書いて確認していきましょう。
ここでも、vite-sample2 プロジェクトのコードを修正していきます。

2-1. 子コンポーネントの追加

まず、ネストされたルートで表示するコンポーネントを追加します。
下図のように、src/components ディレクトリに、UserProfile.vue ファイルおよび UserPosts.vue ファイルを追加してください。

vue_7-6-1.png

記述したコードは以下のとおりです。
画面表示を確認するだけのものですので、内容は何でも構いません。

① UserProfile コンポーネント

src\components\UserProfile.vue
<template>
  <div>名前: 山田太郎</div>
  <div>生年月日: 2000 年 1 月 1 日</div>
  <div>所在地: 東京都</div>
</template>

② UserPosts コンポーネント

src\components\UserPosts.vue
<template>
  <ul>
    <li>おはようございます。</li>
    <li>こんにちは。</li>
    <li>お先に失礼します。</li>
  </ul>
</template>

2-2. ルーターの修正

src\router\index.js ファイルにつき、下図の赤枠部分を修正します。
改行などが入っていますが、実際は children プロパティを追加して、関連するコンポーネントをインポートしただけです。

vue_7-6-2.png

全てのコードをテキストで表示
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'
import UserProfile from '../components/UserProfile.vue'
import UserPosts from '../components/UserPosts.vue'

const routes = [
  { name: 'root', path: '/', component: Home, alias: '/home' },
  { name: 'about', path: '/about', component: About },
  {
    name: 'user',
    path: '/user/:id(\\d+)',
    component: User,
    children: [
      { name: 'profile', path: 'profile', component: UserProfile },
      { name: 'posts', path: 'posts', component: UserPosts },
    ]
  },
  {
    path: '/about/:id',
    redirect: (to) => {
      return { name: 'user', params: { id: to.params.id } }
    },
  },
  { name: 'notFound', path: '/:pathMatch(.*)*', redirect: '/' },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

export default router

追加したコードは以下のところです。

import UserProfile from '../components/UserProfile.vue'
import UserPosts from '../components/UserPosts.vue'
children: [
  { name: 'profile', path: 'profile', component: UserProfile },
  { name: 'posts', path: 'posts', component: UserPosts },
]

children プロパティは、本チャプターの冒頭で紹介したものとほぼ同じですが、ここでは、ルートの指定がしやすいように name プロパティを追加しています。

2-3. User.vue コンポーネントの修正

最後に、src\components\User.vue コンポーネントに、子コンポーネントを表示する router-link と router-view を追加します。

vue_7-6-3.png

全てのコードをテキストで表示
src\components\User.vue
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<template>
  <p>User {{ route.params.id }}</p>
  <p>
    <router-link
      :to="{ name: 'profile', params: { id: route.params.id } }"
    >Profile</router-link> | 
    <router-link
      :to="{ name: 'posts', params: { id: route.params.id } }"
    >Posts</router-link>
  </p>
  <router-view></router-view>
</template>

追加したコードは以下のとおりです。
router-link の to 属性に、名前付きルートでパスを指定しています。

src\components\User.vue（抜粋）
<p>
  <router-link
    :to="{ name: 'profile', params: { id: route.params.id } }"
  >Profile</router-link> | 
  <router-link
    :to="{ name: 'posts', params: { id: route.params.id } }"
  >Posts</router-link>
</p>
<router-view></router-view>

なお、path で指定する場合は次のように記述します。

（参考）path で指定する場合
<p>
  <router-link :to="`/user/${route.params.id}/profile`">Profile</router-link> | 
  <router-link :to="`/user/${route.params.id}/posts`">Posts</router-link>
</p>

2-4. ブラウザで動作確認

それでは、ブラウザで動作確認をしてみましょう。
「UserPage」リンクをクリックすると、次のように「Profile」および「Posts」のリンクが表示されます。

vue_7-6-4.png

まず「Profile」リンクをクリックしてみましょう。
正しくコードが書けていれば、URL のパスが user/1/profile となり、画面には UserProfile コンポーネントが表示されます。

vue_7-6-5.png

次に「Posts」リンクをクリックしてみます。
次のように、URL のパスが user/1/posts となり、画面に UserPosts コンポーネントが表示されれば OK です。

vue_7-6-6.png

以上、本チャプターでは、ルートがネストしている場合の実装方法について学習をしました。

Lesson 7 Chapter 7
ナビゲーションガード

1. ナビゲーションガードとは

ページの遷移時に、条件によってはそのページ遷移をキャンセルさせたり、別のページにリダイレクトさせる処理が必要になったりします。
ナビゲーションガードを使用することによって、ページ遷移時の特定のタイミングで、独自に用意した処理を割り込ませること（フック）が可能となります。

Vue Router に用意されているナビゲーションガードには、以下のようなものがあります。

区分 ナビゲーションガード 説明
グローバルガード beforeEach ルートの遷移前のフック
beforeResolve ルートの遷移前のフック（その他のナビゲーションガードが全て解決した後に実行）
afterEach ルートの遷移後のフック
ルート単位ガード beforeEnter ルートの遷移前のフック
コンポーネント内ガード beforeRouteEnter ページ表示時のフック
beforeRouteUpdate 同一コンポーネントでページ遷移する時のフック
beforeRouteLeave ページ離脱時のフック

フックとは

フックとは、プログラム中の特定の箇所に独自の処理を割り込ませることができる仕組みのことをいいます。
Vue においては、ライフサイクルフックや、Vue Router のナビゲーションガードなどがこれに当たります。

2. グローバルガード

グローバルガードは、router インスタンスに対して直接定義をします。
そのため、ページ遷移が発生する全ての場合で呼び出されることになります。

2-1. グローバルガードの定型例

① beforeEach（グローバルビフォアガード）

beforeEach（グローバルビフォアガード）は「全てのルートの遷移前」に呼び出されます。

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ここに処理を追加します。
  // リダイレクト先がある場合は return で指定できます
})

② beforeResolve（グローバルリゾルブガード）

beforeResolve（グローバルリゾルブガード）は「全てのナビゲーションガードが解決された後かつルートの遷移前」に呼び出されます。構文は次のようになります。 

router.beforeResolve((to, from) => {
  // ここに処理を追加します。
  // リダイレクト先がある場合は return で指定できます
})

③ afterEach（グローバルアフターフック）

afterEach（グローバルアフターフック）は「全てのルートの遷移後」に呼び出されます。
そのため、このガードはナビゲーション（ページ遷移）に影響を与えることはありません。

router.afterEach((to, from) => {
  // ここに処理を追加します。
  // 返却値は指定できません
})

④ グローバルガードの引数と返却値

各グローバルガードの引数は次の 2 つです（これは全てのガード共通の引数となります）。

引数 説明
to 遷移後のルートオブジェクト（$route オブジェクトと同じもの）
from 遷移前のルートオブジェクト（同上）

beforeEach または beforeResolve は返却値として次のいずれかを指定できます。

返却値 説明
false 現在のナビゲーション（ページ遷移）をキャンセルします
リダイレクト先 指定したページにリダイレクトします
（返却値なし） そのまま処理を続行します

2-2. グローバルガードを使用した具体例

コードを書いて確認していきましょう。
vite-sample2 プロジェクトのコードを修正していきます。

① ルーターの修正

src\router\index.js ファイルの下図赤枠部分にコードを追加します。

vue_7-7-1.png

全てのコードをテキストで表示
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'
import UserProfile from '../components/UserProfile.vue'
import UserPosts from '../components/UserPosts.vue'

const routes = [
  { name: 'root', path: '/', component: Home, alias: '/home' },
  { name: 'about', path: '/about', component: About },
  {
    name: 'user',
    path: '/user/:id(\\d+)',
    component: User,
    children: [
      { name: 'profile', path: 'profile', component: UserProfile },
      { name: 'posts', path: 'posts', component: UserPosts },
    ]
  },
  {
    path: '/about/:id',
    redirect: (to) => {
      return { name: 'user', params: { id: to.params.id } }
    },
  },
  { name: 'notFound', path: '/:pathMatch(.*)*', redirect: '/' },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

router.beforeEach((to, from) => {
  console.log('beforeEach', router.currentRoute.value.path)
  if (to.params?.id === '0') return false
})

router.beforeResolve((to, from) => {
  console.log('beforeResolve', router.currentRoute.value.path)
})

router.afterEach((to, from) => {
  console.log('afterEach', router.currentRoute.value.path)
})

export default router

追加したコードは以下のとおりです。

router.beforeEach((to, from) => {
  console.log('beforeEach', router.currentRoute.value.path)
  if (to.params?.id === '0') return false
})

router.beforeResolve((to, from) => {
  console.log('beforeResolve', router.currentRoute.value.path)
})

router.afterEach((to, from) => {
  console.log('afterEach', router.currentRoute.value.path)
})

3 つのガードに共通で、現在のパス（router.currentRoute.value.path）を Console に表示するようにしています。
また、beforeEach ガードでは、パラメーターの id が 0 であればページ遷移を中止するように設定しています（本来であれば「ログインしていない場合はログインページに遷移する」など全ページで共通の定義をすることになります）。

② Home.vue コンポーネントの微修正

今回の動作には関係ありませんが、整理のため、Home.vue コンポーネントで記述している console.log を削除しておきます（下図赤枠部分）。

vue_7-7-2.png

全てのコードをテキストで表示
src\components\Home.vue
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<template>
  <div>Home</div>
  <div>現在のルート名は {{ route.name }} です。</div>
</template>

③ ブラウザで動作確認をする

それでは、ブラウザで動作確認をしてみましょう。
開発者用画面の Console タブも開いておいてください。

vue_7-7-3.png

まず「About」ボタンを押してページを遷移させます。
各ガードが実行されて、Console 画面にガード名と実行時の path が表示されています。

vue_7-7-4.png

なお、path については、遷移前に実行される beforeEach と beforeResolve のパスは / であり、遷移後に実行される afterEach のパスは /about となっていることが確認できます。

次に、以下の beforeEach ガードに設定した条件 to.params?.id === '0' を満たすページ遷移を行ってみましょう。

router.beforeEach((to, from) => {
  console.log('beforeEach', router.currentRoute.value.path)
  if (to.params?.id === '0') return false
})

下図のようにユーザー ID 欄に 0 と入力して「UserPage」をクリックしてください。

vue_7-7-5.png

beforeEach ガードで false が返却されたことにより、ページ遷移が行われなかったことが確認できます。
また、Console 画面に beforeResolve ガードの出力がありません。これは、ナビゲーションがキャンセルされたことにより、beforeResolve ガードの処理には辿り着けなかったためです。

3. ルート単位ガード（beforeEnter）

ルート単位ガード（beforeEnter）は、router インスタンスの各ルートに個別に定義します。

3-1. ルート単位ガード（beforeEnter）の定型例

ルート単位ガード（beforeEnter）は「対象ルートの遷移前」に呼び出されます。

const routes = [
  {
    path: '/users/:id',
    component: User,
    beforeEnter: (to, from) => {
      // ここに処理を追加します。
      // リダイレクト先がある場合は return で指定できます
    },
  },
]

beforeEnter の引数および返却値はグローバルガードと同じです。
第 1 引数 to からは遷移後のルート、第 2 引数 from からは遷移前のルートが取得できます。
返却値には、リダイレクト先または false（ナビゲーションキャンセル）が指定できます。

3-2. ルート単位ガードを使用した具体例

beforeEnter についてもコードを書いて確認していきましょう。

① ルーターの修正

src\router\index.js ファイルの下図赤枠部分にコードを追加します。

vue_7-7-6.png

全てのコードをテキストで表示
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'
import UserProfile from '../components/UserProfile.vue'
import UserPosts from '../components/UserPosts.vue'

const routes = [
  { name: 'root', path: '/', component: Home, alias: '/home' },
  { name: 'about', path: '/about', component: About },
  {
    name: 'user',
    path: '/user/:id(\\d+)',
    component: User,
    beforeEnter: (to, from) => {
      if (to.params?.id === '5') return '/about'
    },
    children: [
      { name: 'profile', path: 'profile', component: UserProfile },
      { name: 'posts', path: 'posts', component: UserPosts },
    ]
  },
  {
    path: '/about/:id',
    redirect: (to) => {
      return { name: 'user', params: { id: to.params.id } }
    },
  },
  { name: 'notFound', path: '/:pathMatch(.*)*', redirect: '/' },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

router.beforeEach((to, from) => {
  console.log('beforeEach', router.currentRoute.value.path)
  if (to.params?.id === '0') return false
})

router.beforeResolve((to, from) => {
  console.log('beforeResolve', router.currentRoute.value.path)
})

router.afterEach((to, from) => {
  console.log('afterEach', router.currentRoute.value.path)
})

export default router

追加したコードは以下のとおりです。

beforeEnter: (to, from) => {
  if (to.params?.id === '5') return '/about'
},

パラメーターの id が 5 であれば、パス /about にリダイレクトするようにしています。

② ブラウザで動作確認をする

ブラウザで動作確認をしてみましょう。

vue_7-7-7.png

beforeEnter ガードに設定した条件 to.params.id === '5' を満たすページ遷移を行います。
ユーザー ID 欄に 5 と入力して「UserPage」をクリックしてください。

vue_7-7-8.png

beforeEnter ガードで、リダイレクト先のパス /about が返却されたことにより、About ページに遷移したことが確認できました。

4. コンポーネントガード

コンポーネントガードには、以下の 3 種類があり、各コンポーネント内で定義を行います。

コンポーネントガード 説明
beforeRouteEnter ページ表示時のフック
beforeRouteUpdate 同一コンポーネントでページ遷移する時のフック
beforeRouteLeave ページ離脱時のフック

4-1. コンポーネントガードの定型例

① beforeRouteEnter（ページ表示時）

beforeRouteEnter はコンポーネントのレンダリング開始前に呼び出されます。
なお、setup() 関数が実行される前に呼び出されるため、setup script 構文内に記述することはできません。そのため、<script> タグ内に記載することになります。 

<script>
export default {
  beforeRouteEnter(to, from) {
    // ここに処理を追加します。
    // リダイレクト先がある場合は return で指定できます
  }
}

② beforeRouteUpdate（同一コンポーネント内ページ遷移時）

beforeRouteUpdate は同一コンポーネント内でページ遷移を行うときに呼び出されます。
こちらは、setup() 関数内で、onBeforeRouteUpdate を用いて記述をします。 

<script setup>
import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate(async (to, from) => {
  // ここに処理を追加します。
  // リダイレクト先がある場合は return で指定できます
})
</script>

③ beforeRouteLeave（ページ離脱時）

beforeRouteLeave はページから離れるときに呼び出されます。
こちらも、setup() 関数内で、onBeforeRouteLeave を用いて記述をします。 

<script setup>
import { onBeforeRouteLeave } from 'vue-router'

onBeforeRouteLeave((to, from) => {
  // ここに処理を追加します。
  // リダイレクト先がある場合は return で指定できます
})
</script>

4-2. コンポーネントガードを使用した具体例

コンポーネントガードについてもコードを書いて確認してみましょう。

① User.vue コンポーネントの修正

src\components\User.vue ファイルの下図赤枠部分にコードを追加します。

vue_7-7-9.png

全てのコードをテキストで表示
src\components\User.vue
<script setup>
import { useRoute } from 'vue-router'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
const route = useRoute()

onBeforeRouteLeave((to, from) => {
  console.log('onBeforeRouteLeave')
})
onBeforeRouteUpdate(async (to, from) => {
  console.log('onBeforeRouteUpdate')
  return false
})
</script>

<script>
export default {
  beforeRouteEnter(to, from) {
    console.log('beforeRouteEnter')
  }
}
</script>

<template>
  <p>User {{ route.params.id }}</p>
  <p>
    <router-link
      :to="{ name: 'profile', params: { id: route.params.id } }"
    >Profile</router-link> | 
    <router-link
      :to="{ name: 'posts', params: { id: route.params.id } }"
    >Posts</router-link>
  </p>
  <router-view></router-view>
</template>

コードを追加した部分は、以下のとおりです。
<script setup> と <script> は 1 つのファイル内に共存させることが可能です。 

<script setup>
import { useRoute } from 'vue-router'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
const route = useRoute()

onBeforeRouteLeave((to, from) => {
  console.log('onBeforeRouteLeave')
})
onBeforeRouteUpdate(async (to, from) => {
  console.log('onBeforeRouteUpdate')
  return false
})
</script>

<script>
export default {
  beforeRouteEnter(to, from) {
    console.log('beforeRouteEnter')
  }
}
</script>

上記のとおり、各コンポーネントガードが呼び出されたときには、 その関数名を Console に表示するようにしています。
また、同一コンポーネント内のページ遷移時に呼び出される beforeRouteUpdate では、返却値に false を指定して、ページ遷移しないように設定しています。

② ルーターの修正

今回の動作には関係ありませんが、グローバルガードに記述した console.log が出力されないように、src\router\index.js ファイルの下図赤枠部分をコメントアウトしておきます。

vue_7-7-10.png

全てのコードをテキストで表示
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'
import UserProfile from '../components/UserProfile.vue'
import UserPosts from '../components/UserPosts.vue'

const routes = [
  { name: 'root', path: '/', component: Home, alias: '/home' },
  { name: 'about', path: '/about', component: About },
  {
    name: 'user',
    path: '/user/:id(\\d+)',
    component: User,
    beforeEnter: (to, from) => {
      if (to.params.id === '5') return '/about'
    },
    children: [
      { name: 'profile', path: 'profile', component: UserProfile },
      { name: 'posts', path: 'posts', component: UserPosts },
    ]
  },
  {
    path: '/about/:id',
    redirect: (to) => {
      return { name: 'user', params: { id: to.params.id } }
    },
  },
  { name: 'notFound', path: '/:pathMatch(.*)*', redirect: '/' },
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})

router.beforeEach((to, from) => {
  // console.log('beforeEach', router.currentRoute.value.path)
  if (to.params?.id === '0') return false
})

router.beforeResolve((to, from) => {
  // console.log('beforeResolve', router.currentRoute.value.path)
})

router.afterEach((to, from) => {
  // console.log('afterEach', router.currentRoute.value.path)
})

export default router

③ ブラウザで動作確認をする

ブラウザで動作確認をしてみましょう。

vue_7-7-11.png

それでは「UserPage」をクリックして User.vue コンポーネントを表示します。
次のように、Console 画面に、ページ表示時のコンポーネントガード「beforeRouteEnter」の名前が表示されることが確認できると思います。

vue_7-7-12.png

次に、ユーザー ID 欄に 2 と入力した上で「UserPage」をクリックすると、Console 画面に、同一コンポーネント内ページ遷移時のガード「onBeforeRouteUpdate」の名前が表示されます（下図）。
URL 欄を見ると、設定どおりに、ページ遷移が行われていないことも確認できます。

vue_7-7-13.png

最後に、ページ離脱をするために「About」をクリックしましょう。
Console 画面に、ページ離脱時のコンポーネントガード「onBeforeRouteLeave」の名前が表示されれば OK です。

vue_7-7-14.png

本チャプター「ナビゲーションガード」の学習は、以上のとおりです。

以上、本レッスンではVue Routerを使用したルーティングについて学びました。
取り上げたルーティングの設定を詳細に覚えておく必要はありませんが、必要になった際には思い出せるよう整理しておきましょう。