Chapter4 Vue Routerを活用したアプリケーション開発
今こそProgressive Frameworkを拡張するとき
Vue Router: 公式プラグイン
4.1 Vue RouterによるSPA
4.1.1 SPAとルーティング
SPAを実装するうえで考慮すべきこと
-
クライアントサイドルーティング
- 履歴管理とか
- ajax
- viewのレンダリング
- モジュール化されたコードの管理
Vue Routerが良しなにやってくれる
4.1.2 Vue Routerとは
機能
-
ルーティング
- 基本的なやつ
-
Hashを使う版では、URL直打ちでちゃんと遷移できる
- bookmarkできる
- ネスト
- リダイレクトとエイリアス
-
履歴管理
- IE9での自動的なfallback
- 自動的にCSSクラスがアクティブになるリンクの仕組み
-
トランジション
- 5章にて詳細に
- スクロールの振る舞いのカスタマイズ
公式doc嫁
4.2 ルーティングの基礎
JavaScript側
-
VueRouterコンストラクト時に、routeにコンポーネントを紐づける- 上から順番にパターンマッチングされる
- pathに
'*'を指定すると、すべてにマッチする
var router = new VueRouter({
routes: [
{
path: '/top',
component: Top,
},
/* ... */
],
});- VueインスタンスにVueRouterインスタンスを渡す
var vm = new Vue({
router: router,
}).$mount('#app');HTML側
- リンク定義:
router-link要素 - コンポーネント反映部:
router-view要素
4.3 実践的なルーティングのための機能
4.3.1 Routeパラメータ、パターンマッチング
/user/1234 みたいなやつの1234を取り出したい
{
path: '/user/:userId',
component: component,
},4.3.2 名前付きルート
userId=1234から/user/1234を組み立てたいようなケース。
静的にHTML側に書くことはできない
/user/:userIdに名前'user'をつけておく<router-link v-bind:to="{ name: 'user', params: { userId: 1234 } }" >
という感じに流し込む
4.3.3 router.pushを使った遷移
プログラム上での遷移
router.push({ name: 'user', params: { userId: 1234 } });4.3.4 Hook
-
ルーティングが変化するときに呼ばれる
- 変化しないときはリンクを踏んでも呼ばれない
- 使用例
- enter: redirect
- leave: confirm
グローバル
router.beforeEach(function (to, /* route object*/
from, /* route object */
next /* 遷移関数。絶対に呼び出すこと */
{
// redirect
if(to.path === '/users') {
next('/top');
}
else {
// 引数なし遷移: 通常の遷移
next();
}
});nextを呼び出さないと遷移しなくなるので注意
route別
route objectのbeforeEnterに同様の指定
component別
beforeRouteEnterに同様の指定
4.4 サンプルアプリケーションの開発
4.4.2 APIによるデータ通信
コンポーネントのcreatedとwatchを使うのが一般的
-
createdが呼ばれるタイミング
/topから/usersに移動したとき- URL直打ち
-
watchが呼ばれるタイミング
/usersから/users?hogeに移動したとき$watchよろしく引数が2つわたってくる (new, old)
4.5 Vue Routerの高度な機能
4.5.1 Routerインスタンス、Routeオブジェクト
Routerインスタンス (component.$router)
サンプルアプリケーションで出てくる機能
$router.replace(location[, onComplete[, onAbort]])
historyスタックをpushせずに遷移
Routeオブジェクト (component.$route)
サンプルアプリケーションで出てくる機能
$route.query
ハテナ以下の部分に対応するkey-valueオブジェクト
4.5.2 ネストしたルーティング
- /user/1234
- /user/1234/profile
という感じにRouteを割り当てるには、
childrenにRouteオブジェクトを再帰的に入れればよい
routes: [
{
path: '/user/:userId',
component: User,
children: [
{
path: 'profile',
component: UserProfile,
},
],
},
]4.5.3 リダイレクト・エイリアス
リダイレクト
beforeEach, beforeEnter, beforeRouteEnterをガリガリ書かなくても実現可能
routes: [
{ path: '/a', redirect: '/b', }
],エイリアス
- リダイレクトと違い、URLは置換されない
-
「本体」にエイリアス定義を書く
- cf. リダイレクトは「別名」側に遷移先を書く
routes: [
{ path: '/a', component: A, alias: '/b', },
{ path: '/c', component: C, alias: ['/e', '/f'], },
],4.5.4 履歴の管理
URL Hash
- デフォルト
- URL直打ち可能
HTML5 History API
- VueRouterインスタンス生成時に
mode: 'history'を指定することで利用可能 - History APIを自前でゴリゴリ書く
- サーバサイドルーティングも必要
コラム Vuexとの連携
-
複数ページで複雑なコンポーネント構成が想定される大規模SPAで使うと良い
例)- メールアプリ
- カレンダー
- vuex-router-sync プラグインで、ルーティング情報もVuexで管理できる