Vue Routerを使用したページ遷移のやり方 #JavaScript

はじめに

Vue.jsを使った、ページの切り替え方法について解説していきます。
Vueの開発環境の構築は終わったけど、何か知らないファイルたくさん入ってるし、どこをどういじって開発していけばいいのかわからない！といった方向けの記事となります。

表示させたいページの作成

ここではhome.vueを表示させてみます。
まずはsrc/components/home.vueを新たに作成します。

home.vue

<template>
  <div>
    <p>ようこそ！<br/>ここは私のサイトです</p>
  </div>
</template>
<script>
export default {
  name: 'Home',
}
</script>

ルーティング設定

ページの作成が終わったので、次はRouterの設定をしましょう。
src/router/index.jsを開いて、新しく作成したhome.vueをルーティングさせます。{} や , を忘れないようにしましょう。

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/home' // new add

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },                 // , の追加を忘れずに
    {
      path: '/home',   // new add
      name: 'Home',    // new add
      component: Home  // new add
    }
  ]
})

これでokです。yarn devで立ち上げて localhost:8080/home/ にアクセスしてみましょう。

home.vueで作成したhomeページを表示できました。

アドレスバーの # を消したい

アドレスバーに # が付いているのに気がつきましたか？これは消す事ができます。先ほどのsrc/router/index.jsにコードを追加します。

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/home'

Vue.use(Router)

export default new Router({
  mode: 'history',  // new add
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]
})

再度アドレスバーに localhost:8080/home/ と入力してみましょう。

# が表示されなくなっているのを確認できました。

まとめ

ここまで読んでくださりありがとうございます。
上手くいきましたか？何か不明な点がございましたら、コメント等頂けましたら幸いです。
ページを作成し、そのページを表示する為にルーティング設定をする。これはVueで開発する上で必須の知識となるので覚えておきましょう。
ちなみにnuxt.jsだと、この様なルーティング設定が不要でファイル名がそのままURLになるので非常に楽です。興味がある方は調べてみてください。