【Vue Router】Vue Routerを使って2つのコンポーネントを画面遷移なしで切り替えたい

こちらの記事の手順を参考にして、まずはVuexとVue Routerをインストールします。

該当ディレクトリ・ファイルの作成

vue init webpack ~~~~コマンドでパッケージがインストールできたら、該当ディレクトリ・ファイルの作成をしていきましょう。

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

import Vue from 'vue'
import VueRouter from 'vue-router'
// ルート用のコンポーネントの読み込み
import Home from '@/views/Home.vue'
import Product from '@/views/Product.vue'
// Vuexと同様で最初にプラグインとして登録
Vue.use(VueRouter)


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

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

main.jsにrouter.jsを登録

import Vue from 'vue'
import App from './App'
//routerの読み込み
import router from './router.js'

new Vue({
  el: '#app',
  router, //router.jsを登録
  render: h => h(App)
})

App.vueにVue Routerを描画

<template>
  <div id="app">
    <!--VueRouterを呼び出し-->
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/product">Product</router-link>
    </nav>
    <router-view />
  </div>
</template>

URLに#が付く

今の状態だと画面遷移はないものの、URLに自動的に#が付くため、ページ内リンクを使用することができません。

解決策としては以下のようにmode項目を増やし、historyを指定してあげることです。

router.js

const router = new VueRouter({
    //#モードからhistoryモードにすれば解決！
    mode: 'history',
    routes: [
        { path: '/', component: Home },
        { path: '/product', component: Product }
        ]
})

まとめ

これでHome.vueとProduct.vueの画面を切り替えるだけの単純なSPAができたはずです。

参考

基礎から学ぶ Vue.js