Help us understand the problem. What is going on with this article?

かゆいところに手が届くvue-routerの機能

More than 1 year has passed since last update.

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タグを簡単に設定できる

title.gif

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

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

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

beforeEachafterEachなどの色々なメソッドがありますが、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

nishinoshake
AWSと映画のサイトを趣味で作ってます。
https://noplan.cc
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした