大変ながらくお待たせいたしました。
今回も、前回に引き続き Web ページ制作の続きを行っていきます。
前回は Vuetify を使ったサンプルページを表示するところまで実践しました。
今回は Vue.js での画面遷移を紹介します。
と、ここで、前回の記事を読まれた方は「？」となるかもしれません。前回作った Web ページは Single Page Application ということをお伝えしました。
つまりページが 1 つしかない Web アプリケーションです。
しかし画面遷移をするということは複数の画面間を行き来するということなので、なんだか矛盾していますね。
疑問を提起しておいて恐縮ですが、ここらへんは後ほど紹介しますので早速実践してみます。
今回使うのは VueRouter です。これを使うことで、 Vue.js のアプリケーションで画面遷移ができるようになります。
VueRouter 導入
公式サイトには、次のコマンドを実行することで VueRouter をインストールできると書いてあるので従います。
npm install vue-router@4コードを書き替え
インストールできたら、公式サイトに従ってコードを少し書き換えます。
App.vue は次のように
<template>
<v-app>
<RouterLink to="/">Go to Home</RouterLink>
<RouterLink to="/about">Go to About</RouterLink>
<v-main>
<RouterView />
</v-main>
</v-app>
</template>main.ts は次のように変更します。
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import AboutView from './components/AboutView.vue'
const app = createApp(App)
const routes = [
{ path: '/', component: HelloWorld },
{ path: '/about', component: AboutView },
]
const router = createRouter({
history: createWebHistory(),
routes,
})
app.use(router)
registerPlugins(app)
app.mount('#app')HelloWorld.vue は次のように書き換えて
<template>
<v-container>
<v-responsive>
<v-row>
<v-col cols="12">
<h1>Home Page</h1>
</v-col>
</v-row>
</v-responsive>
</v-container>
</template>新たに AboutView.vue ファイルを作成します。
<template>
<v-container>
<v-responsive>
<v-row>
<v-col cols="12">
<h1>About Page</h1>
</v-col>
</v-row>
</v-responsive>
</v-container>
</template>
画面を確認
そうすると、まずは http://localhost:3000 にアクセスしたときに、 App.vue に書いたリンクと、 HelloWorld.vue に書いた内容が画面に表示されます。
続いて画面の Go to About リンクを押してみると、 URL が /about に変わって画面も AboutView.vue の内容に切り替わり、画面遷移しました。
という訳で、これで VueRouter を使って画面遷移を実現することができました！
解説
それでは、後で説明すると言っていた「単一ページのアプリケーションの画面遷移」という矛盾点を解説します。
この VueRouter の画面遷移機能は、一見すると画面遷移することで別の画面を表示しているように見えますが、実際は 1 つのファイルの中身を内部的に切り替えることで、画面遷移したように見せているのです。
VueRouter が、 App.vue 内にある RouterView タグの中身を HelloWorld.vue や AboutView.vue のものと切り替えています。
その証拠に、画面を切り替えた前後で Go to Home や Go to About のリンクは存在していますよね？
これはこのリンクが App.vue の RouterView タグの外に書いてあり、画面遷移によって中身を切り替える影響を受けないためです。
最後に
これで画面遷移もできるようになりました。
この仕組みのメリットは、最初に画面を読み込むと画面遷移のときにページの情報を改めて読み込む必要がないため、高速に動作できるところにあります。
ホームページとなると複数の画面から構成することが多いので、画面遷移ができるようになってだいぶ「らしさ」が出てきたのではないでしょうか？
次はホームページらしいデザインを作ってみようと思います。