基礎からメモ： Vue.js CH9-p284 Vue Router の導入と単純なSPA

Vue Router を導入してごく単純なSPAを構築するまで。

Vue Router のインストール

// 最新版
npm install vue-router

// インストールバージョンの指定
npm install vue-router@3.0.1

この方法に頼らずに Vue CLI でテスト用のアプリを作った場合は、手順の中で Vue Router を選択しておけばインストールされている。

シンプルなSPA構造

プロジェクトのsrc以下にviewsフォルダを作り、そこに各ページのコンポーネントを入れていく。ただしフォルダ名はviewsでなくても任意。viewsやpagesといった名前が慣習的に使われる。

Home と Product という、テンプレートしか書いていない２つのコンポーネントを切り替えて表示する単純なSPAを作る。

[src/views/Home.vue]

<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

[src/views/Product.vue]

<template>
  <div class="product">
    <h1>商品情報</h1>
  </div>
</template>

src直下にルーター設定ファイルrouter.jsを作成

[src/router.js]

import Vue from 'vue'
import VueRouter from 'vue-router'
// ルート用のコンポーネントを読み込む
import Home from '@/views/Home.vue'
import Product from '@/views/Product.vue'
// VueRouterをプラグインとして登録する
Vue.use(VueRouter)

// VueRouterインスタンスの生成
const router = new VueRouter({
  // URLパスとコンポーネントをマッピング
  routes: [
    { path: '/', component: Home },
    { path: '/product', component: Product }
  ]
})

// 生成したVueRouterインスタンスをエクスポート
export default router

これをmain.jsから読み込む

[src/main.js]

import Vue from 'vue'
import App from './App'
import router from './router.js'

new Vue({
  el: '#app',
  router,  // アプリケーションにrouterを登録
  render: h => h(App)
})

実際の切り替えた表示をするベースはApp.vueコンポーネントなので、<router-link>にナビゲーションリンクを作り、<router-view>タグを書いておけばルートとマッチしたコンポーネントが表示される。

[src/App.vue]

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/product">商品情報</router-link>
    </nav>
    <!-- ここにパスと一致したコンポーネントが埋め込まれる -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* ナビゲーション */
nav {
    display: flex;
    align-items: center;
    background: #222;
}
nav a {
    display: block;
    padding: 0.5em;
    color: #eee;
    line-height: 1em;
    text-decoration: none;
}
/* アクティブなリンク */
.router-link-active {
    background: palevioletred;
}
</style>

ヒストリーモード

デフォルトではURLの「#」以降を呼んで読み込むページを切り替えるハッシュモードになっている。これを「#」を使わないで RESTっぽくアクセスするには、ヒストリーモードにする。router.jsでモード指定を行う。

........

// VueRouterインスタンスの生成
const router = new VueRouter({
  // モード指定
  mode: 'history',
  // URLパスとコンポーネントをマッピング
  routes: [
    { path: '/', component: Home },
    { path: '/product', component: Product }
  ]
})

........