なるはや Vue SPA入門：Vue Router

Vue CLI3 で作成した SPA（Single Page Application）プロジェクト上で、段階的に Vue.js を学んで行きましょう。

目次はこちら

今回は Vue Router 編です。

前提事項

ファイル構成編 が完了していること。

ページの追加

src/views/SandBox.vue 作成

SandBox.vue

<template>
  <div class="sandbox">
    <h1>SandBox</h1>
  </div>
</template>

src/router.js の修正

router.js

// ...
// SandBox コンポーネントのインポート
import Sandbox from './views/SandBox.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    // ...
    {
      // sandbox パスの追加
      path: '/sandbox',
      name: 'sandbox',
      component: Sandbox,
    },
  ],
})

src/App.vue の修正

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <!-- "/sandbox" へのリンクを追加 -->
      <router-link to="/sandbox">Sandbox</router-link> |
      <router-link to="/about">About</router-link>
    </div>

    <!-- Vue Router で遷移したページが router-view に表示されます -->
    <router-view />
  </div>
</template>

<style>
  /* ... */
</style>

動作確認

画面トップのメニューでSandboxをクリックして画面遷移が出来れば完了です。

次回

単一ファイルコンポーネント