vue-cliで作成したプロジェクトでVue Routerを設定

本文書ではvue-cliコマンドを利用して作成したvueプロジェクトでのVue Routerの設定手順について説明を行なっています。

Vue Routerを初めて使用する人であれば本文書を読む前に下記の文書を読んでVue Routerの基本を理解しておくことをおすすめします。

vue.jsのプロジェクトの作成

vue createコマンドを使ってvueプロジェクトの作成を行います。プロジェクトの名前は任意です。ここではvue-routerという名前で作成しています。


 $ vue create vue-router

Vue CLI v3.11.0
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

プロジェクトの作成だけではなくRouterのインストールも同時に行うので、manually select featuresを選択してください。インストールする機能を選択できるので、Routerを選択してください。他の機能を使う予定がある場合は他のものも選択して進んでください。

Routerを含め、プロジェクト作成後でも追加機能をインストールすることは可能です。


Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
❯◯ Unit Testing
 ◯ E2E Testing

次にhistory mode(ヒストリーモード)を使用するかどうか聞かれるのでYを選択してください。


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

モードにはhistoryとhashがあり、hashを選択するとURLに#が付与されます。例えば/aboutのURLは/#/aboutになります。本文書の後半でモードを変更し、動作確認を行います。

linterを聞かれるので選択を行なってください。本文書では、デフォルトのままでEnterを押します。


? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

本文書ではLint on saveのままEnterを押します。


? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

下記ではpackege.jsonを選択します。


? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
　 In dedicated config files
❯  In package.json

今回の設定を保存するのか聞かれますがNを選択します。


? Save this as a preset for future projects? (y/N)

ここまでの選択が完了するとインストールが開始されます。

インストールが完了したら作成したディレクトリに移動して、npm run serveコマンドを実行してください。


$ cd vue-router/
$ npm run serve
　　・
　　・
 DONE  Compiled successfully in 5661ms                               

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.2.114:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

実行後、ブラウザでhttp://localhost:8080/にアクセスすると下記の画面が表示されます。Routerのインストールを行っているのでページ上部にHomeとAboutのリンクが表示されます。

構成ファイルの確認

インストールが完了するとnode_modules、public, srcの3つのディレクトリが作成されます。

main.jsファイルの確認

srcディレクトリの中にあるもっとも重要なmain.jsファイルを確認します。

Routerをインストールするとimport router from ‘./router’が追加されます。これはmain.jsと同じディレクトリにあるrouter.jsファイルをimportしています。

$mount(‘#app’)によりpublicのindex.htmlにある<div id=”app”>にvue.jsがマウントされます。<div id=”app”>の内側がvue.jsの制御下に置かれることになります。


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

Vue.config.productionTip = false

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

router.jsファイルの確認

router.jsファイルにはルーティングに関する情報が記述されています。ルーティングには”/”(ルート)と”/about”の2つが登録されています。aboutのコンポーネントはlazy-loadedが設定されており、ブラウザから/aboutへのアクセスがあった場合にAbout.vueコンポーネントが読み込まれます。

lazy-loadedを設定しない場合、大きなサイズのvueファイルが存在するとビルドされて作成されるjsファイルも大きくなります。jsファイルのファイルサイズが大きい場合ブラウザからアクセスがあるとjsファイルの読み込みに時間がかかってしまいます。遅延を解消するためにアクセスのあった場合のみ読み込みを行うlazy-loadedが使われています。


import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  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')
    }
  ]
})

App.vueファイルの確認

main.jsのrender関数でApp.vueファイルが指定されているのでブラウザからアクセスがあるとApp.vueファイルの内容が描写されます。

App.vueファイルのtemplate部分がルーティングに関して重要な部分なので内容を確認していきます。


<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>

templateタグの中にはdivタグもありますが、Vue Routerに必須なrouter-linkとrouter-viewという2つのタグを確認することができます。この2つのタグがVue Routerに関連するタグで、それぞれ以下のような役割を持っています。

router-linkタグはリンクを作成するために使用します。
router-viewタグは、それぞれのリンク先に紐づいた内容を表示するために使用します。

ブラウザに表示される画面とrouterタグの関係は以下の通りです。上部のHomeとAboutがrouter-linkタグによって作成され、その下の大きな赤線で囲んだ部分がrouter-viewタグによって作成されています。

Home.vue, About.vueファイルについて

router-linkタグでtoに設定されている”/”(ルート)と”/about”はrouter.jsファイルに記述されているroutesプロパティのpathに対応します。”/”(ルート)にアクセスするとコンポーネントのHomeの内容がrouter-viewタグの場所に表示されます。


routes: [
  {
    path: '/',
    name: 'home',
    component: Home
  },

Home.vueの中を確認するとHelloWorldタグを使っており、HelloWorld.vueがimportされていることがわかります。”/”(ルート)にアクセスした時に表示される内容は大半がHelloWorld.vueに記述されている内容です。


<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>

About.vueはシンプルで、他のvueファイルを読み込まずh1タグでThis is an about pageを記述しているのみです。


<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

これをブラウザから見ると下記のように表示されます。Home、Aboutのrouter-linkタグの部分は”/”(ルート)と同じ内容で、router-viewタグの部分がAbout.vueのtemplateタグの中で記述した内容が表示されています。

“/about”ページがどのように設定されているかわかれば追加ページを作成することは簡単です。

postページを追加する

/aboutページを参考にpostページを追加してみましょう。

App.vueファイルへのrouter-linkの追加

最初にApp.vueにrouter-linkタグを追加します。


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

npm run serverを実施しているとrouter-linkを追加して保存するとビルドが自動で実行され、ブラウザに即座に変更内容が表示されます。

上部にPostリンクが追加されていることが確認できます。

Postのリンクをクリックすると画面は移動しますが、何も表示されません。

router-linkを追加しただけでルーティングの追加もvueファイルも作成していないためです。

ルーティングの追加

router.jsファイルを開いてルーティングを追加します。/aboutのルーティングの下に下記を追加します。


{
  path: '/post',
  name: 'post',
  component: () => import(/* webpackChunkName: "post" */ './views/Post.vue')
},

上記の内容で保存を行うとPost.vueファイルが存在しないのでビルドがエラーになります。

vueファイルの作成

About.vueと同様にviewsディレクトリの下にPost.vueファイルを作成します。作成したPost.vueファイルには以下を記述します。


<template>
  <div class="post">
    <h1>This is a post page</h1>
  </div>
</template>

/postに移動すると下記の画面が表示されます。

このようにaboutページを参考に行えば追加のページも簡単に作成することができます。

モードの変更

これまではhistoryモードで動作確認を行いましたが、別のモードであるhashモードではどのようにルーティング行われるのか確認します。

route.jsファイルに記述されているmode行をコメントします。


export default new Router({
  // mode: 'history',
  base: process.env.BASE_URL,

ブラウザでhttp://localhost:8080/にアクセスするとURLに#がlocalhost:8080/#/となります。

aboutページに移動しても#が入ったURL(localhost:8080/#/about)となります。