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, Vuexまとめ

1
Last updated at Posted at 2021-08-14

Vue Router

手順

Vue.jsとVue Routerの読み込みを行う

リンクを作成するために
router-linkコンポーネント=ページ遷移する時に使うものでレンダリングされるとaタグになる

リンク先に紐づいた内容を表示するために
router-viewコンポーネント=コンテンツが描画される

コンポーネントの設定

Routerインスタンスを生成をしてroutesオプションにpathとcomponentを記述することでルーティング設定を行う

上記を全て行うことで
ページ遷移した時にページ全体は更新されずに部分的に切り替わる

Vue CLIでのVue Routerの設定

App.vue(全体に適用される場所)にrouter-linkを追加 (リンクを作成)

viewsディレクトリの下にファイルを作成する (リンクの中身を作成)

/router/index.jsでpath:とname:の設定をしてvueの読み込み処理を書く
(ルーティングの追加)

Vuex

手順

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?