Vue.jsでの動的ディレクトリベースのルーティングによるSPA構築

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
vue add router

src/
├─ components/
├─ views/
│   ├─ Home.vue
│   ├─ About.vue
│   ├─ User/
│        ├─ Profile.vue
│        ├─ Settings.vue
├─ router/
├─ index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Profile from '../views/User/Profile.vue';
import Settings from '../views/User/Settings.vue';

const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
{ path: '/user/:id/profile', name: 'Profile', component: Profile },
{ path: '/user/:id/settings', name: 'Settings', component: Settings }
];

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});

export default router;

<template>
  <div>
    <h1>User Profile for User ID: {{ userId }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
};
</script>

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // here, implement the actual authentication check
  if (to.name !== 'Home' && !isAuthenticated) next({ name: 'Home' })
  else next()
});

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
];

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link :to="{ name: 'Profile', params: { id: 123 }}">Profile</router-link>
  </nav>
</template>

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