0
2

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.jsでSPAを実現するためのVue Router

Last updated at Posted at 2021-06-06

まず、SPAとは

  • シングルページアプリケーションの略
  • 必要な部分のみ置き換えて画面遷移させるアプリケーション設計
    画面遷移の際にページ全体ではなく、必要な部分だけを遷移させるところがポイント

通常のページ遷移

SPAのページ遷移


(Vuexで作った素材 示している意味は違うけど、なんか通じそうだったから使ってみた)

Vue Routerのインストール

既存プロジェクト配下に移動した上で下記を実行

vue add router

ページ遷移時URLの部分にハッシュを使用しないヒストリーモードを使うかどうかの選択をする
(ファイルに少し変更を加えるため、ファイル編集後にGitコミットしていない場合、インストールしても良いか警告が表示される)

Use history mode for router? (Requires proper server setup for index fallback 
in production) 

こちらを yesNoを選択後、インストールされる
インストール完了後、Vue Routerを使用することができる

参考文献

基礎から学ぶVuejs

0
2
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
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?