【Vue.js+TypeScript】Vue Routerによるページ遷移

以下の記事を参考にさせていただきページ遷移ができるようになった。

note.com

Vue Routerをインストールする。

npm install vue-router@4

router.ts

import {createRouter, createWebHistory} from 'vue-router';
import TopView from "./pages/TopView.vue"
import InfoView from "./pages/InfoView.vue"
import AppsView from "./pages/AppsView.vue"

const routes = [
    {path: '/', name: 'top', component: TopView},
    {path: '/info', name: 'info', component: InfoView},
    {path: '/apps', name: 'apps', component: AppsView},
]

const router = createRouter({
    history: createWebHistory(), // HTML5 History モード
    routes,
})

export default router;

main.ts

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'

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

App.vue

<script setup lang="ts">
</script>

<template>
  <router-link to="/">Top</router-link> |
  <router-link to="/info">Info</router-link> |
  <router-link to="/apps">Apps</router-link>
  <router-view/>
</template>

TopView.vue

<script setup lang="ts">
</script>

<template>
  <h1>Top</h1>
  <img alt="Vue logo" src="../assets/logo.png"/>
</template>

<style scoped>
</style>