Vue.js(Vue 3.x)でvue-routerを使って簡単SPA

学習の備忘録です。Vue-routerを用いたSPAの実装を簡単に説明したものになります。

間違えている箇所等ございましたらご指摘お願いします。

インストール方法

vue3のプロジェクトを作成後、vue-routerをnpmでインストールします。

npm install vue-router@next

vue-routerでSPAを実装するための各ファイルの記述は以下の通りです。

App.vue

<template>
  <div id="vue">
    <div>
      <router-link to="/" class="btn btn-primary mx-2">
        HelloWorld
      </router-link>
      <router-link to="/vue" class="btn btn-warning">
        HelloVue
      </router-link>
    </div>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'vue'
}
</script>

router-link内のto=""にmain.jsで設定したpathを記入することで遷移先を設定することが出来ます。
router-linkをクリックすることでpathに設定されたファイルの内容がrouter-viewに表示されることになります。

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import HelloVue from './components/HelloVue.vue'


const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'index',
      component: HelloWorld,
    },
    {
      path: '/vue',
      name: 'vue',
      component: HelloVue,
    },
  ],
})

var app = createApp(App)
app.use(router)
app.mount('#app')　 

今回はmain.js にまとめて記述していますが、以下の記述を別のjsファイルを作成して
管理するほうが分かりやすいかもしれません。

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import HelloVue from './components/HelloVue.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'index',
      component: HelloWorld,
    },
    {
      path: '/vue',
      name: 'vue',
      component: HelloVue,
    },
  ],
})

HelloVue.vue

<template>
  <div class="alert alert-primary">
    <h1>Hello Vue</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloVue'
}
</script>

HelloWorld.vue

<template>
  <div class="alert alert-primary">
    <h1>Hello Vue</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloVue'
}
</script>

HelloVue.vueとHelloWorld.vueが今回のrouter-viewに出てくる表示内容となっています。
内容は適当なので何でも構いません。

今回の実装方法は一例ですのでもっと効率的で簡単な実装方法があるかと思いますが、
大目に見てやってください。