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')
  }
]