Vueのルーティングについて

今回はVue Routerについてまとめようと思います。

Vue Routerはルーティング機能を提供するライブラリです。ルーティングはクライアントから要求されたURLに応じてコンポーネントを決定する仕組みです。

導入

まずはVue Routerを使えるようにライブラリをインポートします。

npm install vue-router@4

yarn install  vue-router@4

上記はnpmとyarnでインストールする場合です。@以下でインストールするバージョンを指定しています(今回はバージョン4)。

インストールが完了したら、正しくインストールできたかをpackage.jsonを見て確認します。

"dependencies": {
    "vue": "^3.2.47",
    "vue-router": "4"
  },

このようにvue-routerが追加されていればインストールされているはずです。

使ってみる

ここからは実際にVue Routerを使って画面遷移(のようなもの)を行います。

まずはルータの設定を行います。どのURLに対してどのコンポーネントを紐づけるかを定義する必要があります。
そして、ルーティング設定は/src/router/index.jsで定義します。下記はindex.jsの一例です。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '/src/components/Home.vue';
import SignUp from '/src/components/SignUp.vue';

// ルーティング情報
const routes = [
  {
    path: '/', 
    name: 'Home', 
    component: Home,
  },
  {
    path: '/signUp', 
    name: 'SignUp', 
    component: SignUp,
  },
];

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

export default router;

ルータを利用するためにはcreateRouterメソッドでRouterオブジェクトを作成します。 createRouterメソッドではHistoryモードの情報とルーティング情報を設定しています。

Historyモードにはhistoryもしくはhashどちらかを指定します。
hashの場合にはルーティングにURL hashを使用しています。この形式で入力されるとvue-routerは、urlの # を見つけてそれより先の文字列を元に動的にコンポーネントを出し分けます。また、サーバへの通信が発生しない分historyモードより若干早いです。
一方、historyの場合には、URLにハッシュは含まれません。ホスティングサービスを利用する際は、index.htmlを返すように設定しなければならないので注意が必要です。
今回はhistoryを使用するためcreateWebHistory()を設定しています。

ルート定義

Routerオブジェクトを作成する際にルーティング情報を設定します。今回はconst routesで定義したものを設定しているため、定義している部分を説明します。

// ルーティング情報
const routes = [
  {
    path: '/', 
    name: 'Home', 
    component: Home,
  },
  {
    path: '/signUp', 
    name: 'SignUp', 
    component: SignUp,
  },
];

pathはリクエストパスの定義です。 path: '/signUp'の場合には「http://localhost:8080/signup」のようにエンドポイントの後に追加するパスを指定します。

componentは呼び出されるコンポーネントの名前です。例えば、Homeの場合にはHome.vueというコンポーネントファイルが呼び出されます。

nameを指定することで、router-linkでリンク先を指定するときにルート名で指定することが可能になります。

ルート定義に利用するコンポーネントはインポートする必要があります。

ルータの有効化

定義されたルーターはmain.jsで利用できるように設定を行う必要があります。 Routerオブジェクトを下記のようにuseメソッドに渡すことで利用できるようになります。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

ここでメインコンポーネント(初期表示の画面)を修正します。

<script setup>
import { onMounted, ref } from 'vue'
</script>

<template>
  <router-view />
</template>

<style scoped>
</style>

注目する箇所は<router-view />の部分です。
ルーター経由で呼び出されたコンポーネントは<router-view />要素で確保された領域で表示されます。

画面遷移

画面遷移についても見ていきます。画面遷移については2パターン方法があります。

①router-linkによる遷移

router-linkはVue Router利用時におけるaリンクに変わるカスタムコンポーネントです。 router-linkを用いることで実際に画面をリロードすることなく内部の処理による画面遷移を実現します。下記のように定義します。

<router-link to="/limk">リンク</router-link>

// 名前つきルート
<router-link v-bind:to={ name: `SignUp`}>リンク</router-link>

to以降に遷移先のパスを書きます。また、名前つきリンクはindex.jsで定義したルート情報のnameを指定することも可能です。

②pushによる遷移

ここではプログラムで遷移する方法をまとめます。例えば、ボタンをクリックしたら画面遷移する場合などに使います。

Vueコンポーネント内部でthis.$routerによりVue Routerのインスタンスにアクセスできます。そこからrouter.pushメソッドを呼び出して、パスを渡します。

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

const router = useRouter();

function showSignUp() {
    router.push('/signUp');
};
</script>

<template>
    <div>
        <button class="commonButton" @click="showSignUp">会員登録</button>
    </div>
</template>

<style>
.commonButton {
    background-color: #ffa500;
}
</style>

router.push('/signUp')とすることでパスを指定して、対応するコンポネントに画面を変更します。