【学習記録⑮】Vue Routerを用いてURLごとに表示を切り替えてみる！

はじめに

Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はVue Routerを用いてページごとに表示を切り替える方法について記載していきます。

Vue Router

Vue RouterはVue.jsにおいてルーティングを制御するためのライブラリです。

※現在僕の学習環境はVue.js 3のため、Vue Routerのバージョンは4で動作確認をしています。

セッティング

まずはVue Routerをインストールします。

npm install vue-router@4

ルートファイルの設定

上記にてvue-routerをインストール後、router.jsなどのファイルを作成し、以下のようにrouterの設定を行います。
インストールしたvue-routerからcreateRouter, createWebHistory をimportします。
createRouterメソッドがルーティング情報を生成し、createWebHistory()はhistoryモードを指しています。
historyモードに設定することでURLに'#'などが付かなくなります。
（createWebHashHistory()を設定するとURLに'#'が付きます。）

今回はMorningページとAfternoonページを用意しているのでそれぞれをroutesにセットします。

router.js

import Morning from './views/Morning.vue';
import Afternoon from './views/Afternoon.vue';
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: Morning },
        { path: '/afternoon', component: Afternoon }
    ]
});

export default router;

Main.jsでの呼び出し

上記で設定したルーター情報をMain.jsで呼び出します。

Main.js

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

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

ルート先それぞれのコンポーネント

今回はMorningページとAfternoonページを使用するので、それらのVueファイルを作成します。

Morning.vue

<template>
  <div>おはよう</div>
</template>

Afternoon.vue

<template>
  <div>こんにちは</div>
</template>

出力結果

npm run serveコマンドを実行し、結果を見てみます。

URLがlocalhost:8080のときはMorningページが出力されていることが分かります。

URLがlocalhost:8080/afternoonのときはAfternoonページが出力されていることが分かります。

おわりに

今回はVue Routerを利用してURLごとにページを切り替える方法を学びました。
次回はrouter-linkタグを用いて画面からURLを切り替えていく方法についてまとめていこうと思います。