vue-routerを使ってみて、手が届くなぁと思った機能がいくつかあったのでそのまとめです。

ページ遷移時のスクロール位置を手軽に制御できる

const router = new VueRouter({
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

SPAでルーティングライブラリを使うときに、ブラウザのページ遷移と近い挙動にしたいなぁと考えるのが自然だと思うのですが、その機能がvue-routerには標準で用意されています。

インスタンスの作成時に、scrollBehaviorに位置を返す関数を指定しておくと、その位置へ行ってくれます。戻る/進むのときには元々いた場所がsavedPositionに入っているのでそれを返し、ない場合はトップへ行くという風に書いておくと、ブラウザらしい挙動になります。素敵。

スクロールの振る舞い

titleタグを簡単に設定できる

const router = new Router({
  routes: [
    { path: '/hoge', component: Hoge, meta: { title: 'hoge' } },
    { path: '/fuga', component: Fuga, meta: { title: 'fuga' } }
  ]
})

router.afterEach((to, from) => {
  if (to.meta && to.meta.title) {
    document.title = to.meta.title
  }
})

<router-link>で遷移するだけではタイトルは変わってくれないので、おなじ名前のページが履歴に積み上がって汚れてしまいます（最近、特にスマホではページの履歴をたどって戻ることが少ないので、それでも良い気もしますが・・・）。

ルーターの機能でタイトルを差し替えられるわけではないので、ルートメタフィールドで各ルートのタイトルを定義しておいて、ナビゲーションガードでページ遷移時にタイトルを変更します。

ナビゲーションガードは、ページ遷移前に挟まれる処理なので、ログインしているかを確認するみたいな使われ方がメインだと思いますが、タイトルの設定にも使えます。

beforeEachやafterEachなどの色々なメソッドがありますが、beforeEachの段階ではまだナビゲーションが確定していないので、タイトルの設定はafterEachで行うのが良さそうです。

完全なナビゲーション解決フロー

Not Foundも手軽に設定できる

import NotFoundComponent from './NotFoundComponent'

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

SPAでルーティングライブラリを使う際には、サーバーへのリクエストが404のときにindex.htmlへフォールバックするように設定すると思います。CloudFront+S3を使う場合も、エラードキュメントをindex.htmlにするみたいな力技になると思うので、404ページはフロントエンドで実装する必要があります。

そんなときには、パスにワイルドカードを指定して、NotFound用のコンポーネントを置くだけで、404ページのviewを表示することができます。手軽。

https://aws.noplan.cc/route66

ページ遷移のアニメーションも簡単

<transition name="fade">
  <router-view></router-view>
</transition>

Vue.jsのtransitionをそのまま使えます。

トランジション | vue-router
Enter/Leave とトランジション一覧 | Vue.js

やりたいと思ったことが、追加のライブラリをいれずに標準の機能で実現できるのが嬉しいですね。vue-routerそのものが使いやすいのはもちろんですが、読みやすいドキュメントにも助けられているので、ドキュメントを作っている人にマジ感謝です。

他にも色々と素敵な機能があるかもしれませんが、個人的に感動した機能は以上です。

vue-router