1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

vue-routerのmode: 'abstract'とは?

Posted at

動機

vue-routerの公式ページによると、下記のように説明されている。

abstract: 全ての JavaScript の環境で動作します。 e.g. Node.js を使ったサーバーサイド。 もしブラウザの API が存在しない場合、ルーターは自動的にこのモードに強制されます。

んーでも、どんな挙動になるのか、もうちょっと書いてくれていてもいいんじゃないかな・・・

で、どんな挙動になるのか

URLを一切変更せず、ページ遷移するようになる。
hashやhistoryのときにURLを使って表現していた現在ページの情報をメモリ上で保持して、どこにも表示はしないイメージ。
vue-routerの機能は普通に使える。
<router-link>とか、router.push()とか、各種ナビゲーションガードとか、普通に動く。
ただし、ブラウザのAPIが存在しない環境が前提なので、historyAPIに依存した機能は無効になっている。
だから、戻るボタンを押したらSPA内でのナビゲーションに関係なく、前のページに戻る。
その辺を制御したければ自分でhistoryAPIをいじることになる。

あとひとつ罠があって、vue-routerに初期状態を手動で与えないといけない。なぜかは知らない。

App.vue
  mounted() {
    this.$router.replace('/');
  }
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?