Vue Routerの初期設定

index.jsファイル内でVueとVue Routerをインポートします。

• Vueのインポート
  import Vue from 'vue'
• Vue Routerのインポート
  import VueRouter from 'vue-router'

モジュール化によるRouterの適用

VueプラグインとしてVue Routerを登録します。

ルーターオブジェクトの作成

const appRouter = new VueRouter({
    mode: "history", //ハッシュなしのURL形式
    routes: [
        {
            path: "/about",
            component: AboutPage
        },
        {
            path: "/home",
            component: HomePage
        },
        {
            path: "/",
            redirect: "/home" //ルートパスをホームにリダイレクト
        }
    ]
})
export default appRouter;

main.jsでのルーター設定

new Vue({
  router: appRouter, //Vueインスタンスにルーターをマウント
  render: h => h(App)
}).$mount('#app')

実装コード例

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import appRouter from './router/index'
new Vue({
  render: h => h(App),
  router: appRouter, //全コンポーネントで$routerプロパティ経由でルーターにアクセス可能
}).$mount('#app')

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import AboutPage from '../views/About.vue'
import HomePage from '../views/Home.vue'
Vue.use(VueRouter)
const appRouter = new VueRouter({
    //hashモード（デフォルト）ではURLに#が含まれる
    //historyモードではクリーンなURLが使用可能
    mode: "history",
    routes: [
        {
            path: "/about",
            component: AboutPage
        },
        {
            path: "/home",
            component: HomePage
        },
        {
            path: "/",
            redirect: "/home"
        }
    ]
})
export default appRouter;

App.vue

<template>
    <div class="app-container">
        <nav>
            <router-link to="/about">Aboutページ</router-link>
            <router-link to="/home">Homeページ</router-link>
        </nav>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: "App",
};
</script>
<style scoped>
.app-container {
    padding: 20px;
}
nav {
    margin-bottom: 20px;
}
nav a {
    margin-right: 15px;
}
</style>

views/About.vue

<template>
  <div class="page-content">
      <h1>Aboutページ</h1>
      <p>これはAboutページのコンテンツです。</p>
  </div>
</template>
<script>
export default {
    name: "AboutPage",
};
</script>
<style scoped>
.page-content {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px;
}
</style>

views/Home.vue

<template>
    <div class="page-content">
        <h1>Homeページ</h1>
        <p>これはHomeページのコンテンツです。</p>
    </div>
</template>
<script>
export default {
    name: "HomePage",
};
</script>
<style scoped>
.page-content {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px;
}
</style>