上記の続き。vue-routerも必要だった。
ところでブログ上Vue.jsソースのハイライトが残念になるのはどうしたら良いんだろう…。

環境

ubuntu 18.04
Vue CLI 4.3.1

vue-router

router.vuejs.org

Vue.jsでSPA（シングルページアプリケーション）を作成するためのプラグイン。「このURLが来たらこのソースを表示」というのを定義していく感じ。

元のプロジェクトはVue CLIで作ってあるため vue add router でインストール。Vue CLI を使っていない場合は npm install vue-router で。
本当は vue create でプロジェクト作成時にManuallyを選択した先でRouterを設定しておくのがベストだったと思う。

変更をコミットしといたら？という警告はスルー。
ヒストリーモードの設定を聞かれるのでyesで設定。この設定でURLの方式が変わるらしい。

$ vue add router

 WARN  There are uncommited changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

インストールが完了すると、srcディレクトリ下にrouterディレクトリ、viewsディレクトリができている。
f:id:hotate-issimo:20200502151630p:plain

動作確認してみる。

$ npm run serve

f:id:hotate-issimo:20200502151705p:plain

トップに「Home」「About」のリンクができており、画面遷移できるようになっている。

昨日追加したボタン群が消えたな？と思ったらApp.vueが自動で書き換わっていた。
作りかけの状態からvue-routerをインストールする際は気をつけよう。

ソースを見てみる

main.js にはrouterの定義が追加されている。
ちょっとimportの並び順にもやっとするけれどひとまず放置。

import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import router from './router'

Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vue からはHelloWorld.vueを読み込んで表示する処理がなくなり、「Home」「About」のリンクが書かれている。スタイル部分は省略。

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

HelloWorld.vue を読み込んで表示する処理はviews内のHome.view にある。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

で、router内のindex.jsはこんな感じ。
path: にURL（http://localhost:8080以降の部分）を設定。
name: は設定しなくても実は動く。
component: にソースの場所を設定。Home のようにimportしておいてから設定しても良いし、Aboutのように直接書いても良い。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

name: の設定を活用する場合は、<router-link>の書き方が変わる。
App.vueが以下のようになる。スタイル部分は省略。

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>|
      <!-- nameを利用した書き方。:to は v-bind:to の略 -->
      <router-link :to="{ name: 'About' }">About</router-link>
      <!--<router-link to="/about">About</router-link>  元の書き方 -->
    </div>
    <router-view />
  </div>
</template>

サンプルだとかえって面倒な記述になったけれど、URLが長く複雑になる大規模な開発では効力を発揮するはず。

hotate-issimoの日記

超絶マイペースに自己研鑽に励む

Vue CLIで開発

環境

vue-router

ソースを見てみる