6/6 Vue.js

自分なりの解釈

Vue Routerを初めて触ったイメージ

webページに見立てたコンポーネントをリクエストに応じて<router-view/>の部分を差し替える。

差し替えるだけだから動作が軽く高速。

処理の流れはrouter-linkタグならto=""で指定されたViewコンポーネントがrouterフォルダのindex.jsのコードを参照して表示される。

index.jsではコンポーネントファイルの読み込みやpathやname、componentを記述する。ここに記載したpathをrouter-linkタグのto=""で記述することで指定したコンポーネントを表示させる。

この際にpathを間違えたりimportでのファイルパスを少しでも間違えると表示されないから追加したらすぐに表示されるか確認した方が混乱せずにすみそう。

metodでもthis.$router.push('path')とすることでViewコンポーネントの差し替えができる。

また、this.$router.push({name: name, params:{ })とすることでコンポーネントの差し替えにパラメーターを持たせることもできる。

・表示したいコンポーネントの準備とexportで外部に出す

・index.jsでコンポーネントのimport、ptah name componentや必要に応じてpropsの情報を記述

・pathやnameの情報を使ってrouter-linkタグやmethodを使用してrouter-viewに表示されるコンポーネントを差し替える。

とりあえずこんなイメージで解釈しました。

もっと触って誤った理解があれば正してより理解を深められるように明日からも頑張る。