勉強日記

チラ裏

Vue.js入門 基礎から実践アプリケーション開発まで Chapter4

JavaScript Vue.js 勉強メモ

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,
        },
        /* ... */
    ],
});

var vm = new Vue({
    router: router,
}).$mount('#app');

HTML側

4.3 実践的なルーティングのための機能

4.3.1 Routeパラメータ、パターンマッチング

/user/1234 みたいなやつの1234を取り出したい

{
    path: '/user/:userId',
    component: component,
},

4.3.2 名前付きルート

userId=1234から/user/1234を組み立てたいようなケース。
静的にHTML側に書くことはできない

  1. /user/:userIdに名前'user'をつけておく
  2. <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で管理できる