Vue Routerとは？
コンポーネントで構成された複数の画面を、URLと紐づける、SPA構築のためのルーティングライブラリです。
インストール
Vue.jsにはデフォルトで入っていないのでインストールする必要があります。
|
1 |
npm install vue-router |
実装の流れ
下記2つを使います。
- ルート
- ルーターコンストラクタ
ルート
URLとViewの情報を保持するレコードです。（このURLの際はこのコンポーネントを表示する。）
ルーターコンストラクタ
|
1 2 3 |
new VueRouter({ routes: [] }) |
より効率的な利用を行うには？
Vue Routerは、Vuexと組み合わせることでより効率的なデータ管理をすることができます。
構文
srcディレクトリ配下に下記ファイルを生成するのが一般的です。
|
1 |
src/router.js |
Vue.useと記述しているのはプラグインをソース内で使用する際に使う構文になります。プラグインというのはグローバルにソース全体で使用するプログラムのことです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import Vue from 'vue' import VueRouter from 'vue-router' //コンポーネント1 import コンポーネント1 from 'コンポーネントのパス' //コンポーネント2 import コンポーネント2 from 'コンポーネントのパス' //プラグイン登録 Vue.use(VueRouter) const router = new VueRouter({ routes:[ { path:"/",component:コンポーネント1}, { path:"/test",component:コンポーネント2} ] }) |
使用できるコンポーネント
| コンポーネント | 説明 |
|---|---|
| <router-view> | 「<router-link>」でマッチしたコンポーネントを描画する。描画するコンポーネントはroutesにて登録したものをURLを見て決めます。（コンポーネントを切り替える動的コンポーネントのような動きをします。） |
| <router-link> | ルートのリンクを作成します。ここでマッチしたコンポーネントを、「<router-view>」に埋め込みます。普通にaタグを使っても同じようにページを切り替えることは可能なのですが、aタグでは毎回サーバーにリクエストを行ってしまいます。router-linkを使うことでサーバーにリクエストを行わずVue.js側でページを切り替える処理を行いSPAを実現する事が可能です。 |
実装例
URL1というリンクをクリックしたらVue Routerに登録したURLの内容が「router-view」に描画されます。
|
1 2 3 4 5 |
<div id="app"> <router-link to="/url1">URL1</router-link> <router-link to="/url2">URL2</router-link> <router-view></router-view> </div> |
router-link以外のURL遷移方法
ページ遷移は下記のようにすればrouter-link以外に実装する事が可能です。ボタンクリック時等何かのイベントがあったタイミングでページを遷移させたい場合とかの記述に使用する事が可能です。$routerとは何かに関しては後述します。
|
1 |
this.$router.push("コンポーネント名"); |
オブジェクトにpathを使っても記述できます。
|
1 |
this.$router.push({path:"コンポーネント名"}); |
フック関数
ページ遷移が実行される前後に処理を追加できます。
グローバルのフック関数
全ページの遷移前に定義できます。
|
1 |
router.beforeEach(処理) |
ルート単位のフック関数
特定の遷移前に処理を追加できます。
|
1 |
beforeEnter: 処理 |
コンポーネント内のフック関数
ページ遷移が行われてコンポーネントが初期化される前に呼び出されます。
|
1 |
beforeRouteEnter: |
RouterインスタンスとRouteオブジェクト
$router
Routerインスタンスを示します。Webアプリケーションのおいて1つ存在し全般的なRouter機能を提供します。
具体的な役割
- アプリの履歴管理
- router-linkを使わずにプログラムでページ遷移を実行させる場合
$route
Routeオブジェクトを示します。ページ遷移が発生するごとに生成され現在のアクティブなルート情報を保持しています。
VuexでVue Routerのルーティング情報を一元管理するには？
Vue Routerはvuex-router-syncを利用すればVuexと連携することで可能です。
設計方針
Vue RouterやVuexも導入しない方が良いシステム
- サーバー側でルーティングを行っていないシステム
- ランディングページ等の一枚ページで複雑なコンポーネント構成になっていないサイト
Vue Routerのみを使った方が良いシステム
各画面でシンプルな機能を提供するシステム
- アンケートフォーム
- 管理画面
Vuexのみを使った方が良いシステム
下記のようにページ遷移はないが１機能で作り込みが必要なシステム
- ダッシュボード
- チャットアプリ
Vue RouterやVuexのどちらも使った方が良いシステム
複数ページで複雑なコンポーネントが使われると想定される大規模SPA
- メールアプリ
この記事へのコメントはありません。