Vue.js において画面遷移を実装する際は Routing と呼ばれる機能を用いるのが便利です。Vue.js においては、 Vue Router が公式にサポートされているルーターになり、これは Vue3 になっても変わりがありません。
現状最新である Vue Router v4 のドキュメントには掲載されていませんでしたが v3 同様に「プラグインとして追加」する方法で実装ができましたので、 Vue3 における実装について整理していきます。なお本記事では Vue CLI (Vue3) で作成したプロジェクトを用いて説明します。 Vue3 での Vue CLI についてはこちらの記事も参考にしてください。

vue-router の準備

vue-router のインストール

[ads]

公式の手順に従って vue-router をインストールしていきます。

% npm install vue-router@4

インストール後の package.json は以下の様になりました。

"dependencies": {
   "core-js": "^3.6.5",
   "vue": "^3.0.0",
   "vue-router": "^4.0.11"
 },

vue add router で Vue CLI に Vue Router をプラグインとして追加

[ads]

今回は、上述のとおり vue-router 4.x 系で進めていきます。4.x 系ドキュメントには記載がないものの、 3.x 系ドキュメントに記載がある方法で進めていきます。具体的には、 vue add router コマンドを使って、プラグインとして vue-router を利用する方法になります。vue add router コマンドを実行すると、以下の通りモードの選択を聞かれます。

なお、 vue add router コマンドを実行すると既存の App.vue が上書きされてしまいますので、必要に応じてコピーを取るなどしてください。

% vue add router
📦  Installing @vue/cli-plugin-router...

up to date in 3s✔  Successfully installed plugin: @vue/cli-plugin-router
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

選択肢：History モードか Hash モードか？

ここでは “Y” を選択し、 History モードを選択します。

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
🚀  Invoking generator for @vue/cli-plugin-router...⚓  Running completion hooks...
✔  Successfully invoked generator for plugin: @vue/cli-plugin-router

インストール後、 package.json に cli-plugin-router が追加されています。

また、src ディレクトリに router, views の各ディレクトリが作成されています。

router / index.js
views / About.vue
views / Home.vue

更に、 App.vue も内容が上書きされています。

主な上書きポイントは以下の通りです。

template に router-link 追加
script の削除
style に vue router 用のものが追加

<template>
 <div id="nav">
   <router-link to="/">Home</router-link> |
   <router-link to="/about">About</router-link>
 </div>
 <router-view/>
</template>

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
 
#nav {
 padding: 30px;
}
 
#nav a {
 font-weight: bold;
 color: #2c3e50;
}
 
#nav a.router-link-exact-active {
 color: #42b983;
}
</style>

npm run serve で起動

それでは npm run serve で起動してみます。一見 Vue CLI のデフォルトの起動画面と同じに見えますが、画面上部に Home, About の2つのリンクが追加されています。この画面は Home がクリックされた状態となっていて、 Home.vue の内容が表示されています。 About をクリックすることで、About.vue の内容が表示されます。