Vue.jsにVue Routerを導入してルーティングを行う方法




Vue Routerとは

簡単に説明すると、URLのパスに応じてSPAのページを簡単に切り替えるための仕組みを提供してくれます。

まずはインストール方法。yarnとnpmで書いてますが今はyarnが主流です。

Vue Routerの導入

routerの設定

router/index.jsに書きコードを書きます。

pathに設定したURLになったときcomponentsに設定したページに切り替える設定をこのように書きます。

vueの初期化

routerの設定をVueで使えるようにmain.jsに設定します。

Vueインスタンスを作るときに設定するだけです。

Componentsの設定

Vue Routerのフロントでの設定で大事なのはrouter-linkとrouteer-viewの2つだけです。

router-linkはrouter/index.jsで設定したpathで表示したいものを設定するだけです。

そのURLになったときにrouter/index.jsにpathと一緒に設定したcomponentがrouter-viewにレンダリングされるようになります。

Vue Routerはまずはこの基本的な使い方は押さえておけば大丈夫です。

他にもpathに合わせてrouterを入れ子にしたり、リダイレクト機能、スクロール、遅延ローディングなど機能が豊富なので今後紹介していきたいと思います。

The following two tabs change content below.

高妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です