Vue Routerを使ってシングルページアプリケーション(SPA)を構築する

npm install vue-router

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

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

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

<template>
  <nav>
    <router-link to="/">ホーム</router-link>
    <router-link to="/about">アバウト</router-link>
  </nav>
  <router-view></router-view>
</template>

const routes = [
  { path: '/user/:id', component: User }
];

<template>
  <div>User ID: {{ $route.params.id }}</div>
</template>

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
];

const routes = [
  { path: '/user/:id', name: 'user', component: User }
];

this.$router.push({ name: 'user', params: { id: 123 } });

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (isAdmin()) {
        next();
      } else {
        next('/');
      }
    }
  }
];

const routes = [
  { path: '/:pathMatch(.*)*', component: NotFound }
];