Vu3 CLI プロジェクトで vue router を使ったルーティングを実装する

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

vue-router の準備

vue-router のインストール

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

% npm install [email protected]

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

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

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

今回は、上述のとおり 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 の内容が表示されます。 

まとめ

  • Vue 3 においても、ルーティングには Vue Router を用いることができる
  • 現状最新の Vue Router version 4.x でも vue add router コマンドでルーティングが実装できる

関連