Vue Routerをとりあえず導入して、最低限の動きを見るまでの手順メモです。
Vue Routerはシンプルに使うことができて大変便利ですが、
本当はもっと複雑な設定もできる奥深いプラグインみたいです。
Vue Routerとは
- Vue.jsの公式プラグイン
- SPAを構築するためのルーティングライブラリ
クライアントの履歴管理を含めたページ遷移（＝ルーティング管理）やデータ取得・描画の機能を担ってくれます。
（何を言っているのかよくわかっていません）
Vue Router 導入
既存のプロジェクトにインストールします。
npm install vue-router
※ 新規プロジェクトの場合、vue createの際にvue-routerも併せて導入できるようです。
Vue Routerの設定
srcフォルダ配下に「router.js」という新規JSファイルを作成し、Vue Routerの設定を書いていきます。
main.jsに書いても問題ないですが、なるべく疎にしておきます。
//import
import Vue from 'vue';
import router from 'vue-router';
//1.component読み込み
import top from "./components/top"
import end from "./components/end"
//vue-routerをインストール
Vue.use(router);
//2.routerの設定とインスタンス生成
export default new router({
routes:[
{
path: "/", //トップページ
component:top
},
{
path: "/end", //終点ページ
component:end
}
]
});
1.component読み込み
routerで表示を制御したいコンポーネントをimportしておきます。
参考までに、topとendの中身はこんな感じです。
<template>
<div id="app">
トップ
</div>
</template>
<template>
<div id="app">
終点
</div>
</template>
2.routerの設定とインスタンス生成
他にも様々な設定が可能ですが、今回はroutesのみ設定します。
ここでURLとコンポーネントの組み合わせを定義できます。
今回の例だと、URLが
"~xxx/"のときはtopコンポーネントが描画され、
"~xxx/end"のときはendコンポーネントが描画されます。
main.jsで読み込む
上記で作成したrouter.jsをmain.jsで読み込みます。
import Vue from 'vue'
import App from './App.vue'
import router from "./router";
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
以上でRouterの設定は完了です。
親コンポーネント側の設定
あとはこれを受けるための要素を親コンポーネント側で用意します。
今回は「App.vue」の特定の部分にtopコンポーネントとendコンポーネントを出し分けしたいので、
App.vueの中にrouter-view要素を書いておきます
以下の<router-view></router-view>の部分に、routesで設定したコンポーネントが描画されます。
<template>
<div id="app">
<router-link to="/">トップページ</router-link><br>
<router-link to="/end">終点ページ</router-link>
<!--↑Routerのリンク（ページ遷移）を定義-->
<router-view></router-view>
<!--↑ここにRouterで設定したコンポーネントが描画される -->
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
router-viewだけだとアドレスバー直打ちで遷移する羽目になるので、
<router-link to="xxx">でリンクを表示して、ページ遷移できるようにしています。
動かす
localhostで動かしてみます。
初期表示
「終点ページ」押下
「終点ページ」押下後、「トップページ」押下
※routerの設定でmodeをhistoryにすると、URLの#が消えていい感じになるようです。
参考
- [Vue.js] vue-routerのhashモードとhistoryモードの違いをざっくり理解する
- 【Vue.js】vue-routerの基礎をサンプルを用いて解説
- 『Vue.js入門 基礎から実践アプリケーション開発まで』/技術評論社