Vue Routerのインストールと基本動作サンプル
Vue Routerのインストールと基本動作サンプル
Vue Routerとは
シングルページアプリケーションにおいて、複数の仮想画面遷移を行う公式のライブラリ。
インストール
(a) npmを使用
npm install vue-router
(b) Vue CLIを使用
vue add router
※App.vueが上書きされるので、修正を入れている場合はバックアップを取っておくこと。
(c) CDNを使用
<script src="/path/to/vue-router.js"></script>
(d) Vue UIを使用
Vue UIから簡単にインストールできます。
プラグインの画面上部に出る「Vue Routerを追加」をクリックでインストール完了。簡単すぎ。
今回は、npmを使用してインストールし、Vue CLIのプロジェクトで自分でコードを書きながら動かしてみます。
読み込み
main.jsに下記の読み込み処理を追加します。
import VueRouter from 'vue-router' Vue.use(VueRouter)
実装
Main.vueにrouter-viewを追加します。
<div id="app"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> <router-view></router-view> </div>
main.jsにVueRouterのルーティングなどを定義し、インスタンスを作成します。
//メニュー部分の定義 const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } //ルーティングの定義 const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] //VueRouterインスタンス作成 const router = new VueRouter({ routes: routes //単にroutesと書く短縮表記も使える }) //Vueオブジェクトにマウント const app = new Vue({ router }).mount('#app')
テストページの上部に、新しく「Home」と「About」のリンクが増えており、この2画面で画面遷移できるようになっています。URLも変わるのが確認できますね。
メモ:
「vue add router」コマンドでrouterを実装した場合、routerディレクトリ以下にindex.jsが作られ、以下のコードが書かれている。上に記載したメニュー部分、ルーティングの定義については、このようにまとめて書いてもいいらしい。
import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import('../views/About.vue') } ]