【Vue.js+TypeScript】Vue Routerによるページ遷移
以下の記事を参考にさせていただきページ遷移ができるようになった。
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>