【Vue.js】Vue Router で多階層のルート定義を整理する方法｜動的ルートとネスト構造の管理

// router/modules/admin.js
export default [
  {
    path: '/admin',
    component: () => import('@/layouts/AdminLayout.vue'),
    children: [
      // path が空文字の子は、/admin そのものを開いたときに表示される（デフォルトの子）
      {
        path: '',
        name: 'AdminDashboard',
        component: () => import('@/views/admin/Dashboard.vue')
      },
      // 子の path は / で始めない（親の /admin からの続きになる） → /admin/users
      {
        path: 'users',
        name: 'AdminUsers',
        component: () => import('@/views/admin/Users.vue')
      }
    ]
  }
]

<!-- layouts/AdminLayout.vue -->
<template>
  <div class="admin">
    <aside>
      <RouterLink :to="{ name: 'AdminDashboard' }">ダッシュボード</RouterLink>
      <RouterLink :to="{ name: 'AdminUsers' }">ユーザー</RouterLink>
    </aside>

    <main>
      <!-- 子ルートのコンポーネントが、ここに表示される -->
      <RouterView />
    </main>
  </div>
</template>

// Vue Router 4.1 以降：親に component を書かずに、パスの接頭辞でグループ化できる
{
  path: '/admin',
  children: [
    { path: 'users', component: Users },
    { path: 'settings', component: Settings }
  ]
}
// 親のレイアウトは不要だが、共通のガードや meta をまとめたいときに使える

// router/modules/main.js：一般ユーザー向けのレイアウト
export default [
  {
    path: '/',
    component: () => import('@/layouts/MainLayout.vue'),
    children: [
      { path: '', name: 'Home', component: () => import('@/views/Home.vue') },
      { path: 'about', name: 'About', component: () => import('@/views/About.vue') }
    ]
  }
]

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import mainRoutes from './modules/main'
import adminRoutes from './modules/admin'

const routes = [
  ...mainRoutes,
  ...adminRoutes,

  // どれにも一致しなかったURLは、404ページを表示する
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue')
  }
]

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

{
  // :id の後ろの (\\d+) は正規表現。数字だけに一致する
  path: 'users/:id(\\d+)',
  name: 'AdminUserDetail',
  component: () => import('@/views/admin/UserDetail.vue'),
  props: true     // route.params を、コンポーネントの props として渡す
}

<!-- views/admin/UserDetail.vue -->
<script setup>
import { ref, watch } from 'vue'

// props: true にしたので、URL の :id が props.id として届く（文字列）
const props = defineProps({ id: String })
const user = ref(null)

// /admin/users/1 → /admin/users/2 に移動しても、同じコンポーネントが再利用される。
// onMounted は再実行されないので、id の変化を watch で受ける
watch(
  () => props.id,
  async (id) => {
    const res = await fetch(`/api/users/${id}`)
    user.value = await res.json()
  },
  { immediate: true }
)
</script>

<script setup>
import { onBeforeRouteUpdate } from 'vue-router'

// 同じコンポーネントのまま、パラメータだけが変わるときに呼ばれる
onBeforeRouteUpdate(async (to, from) => {
  if (to.params.id !== from.params.id) {
    // 新しい id で、データを取り直す
  }
})
</script>

const routes = [
  // 数字だけ
  { path: '/:orderId(\\d+)', component: Order },
  // それ以外の文字列（具体的な数字のルートを、先に書く）
  { path: '/:productName', component: Product },

  // 省略可能（?）： /users と /users/posva の両方に一致
  { path: '/users/:userId?', component: Users },

  // 繰り返し（+ は1つ以上、* は0以上）： /one/two/three → params.chapters は配列
  { path: '/:chapters+', component: Chapters }
]

const routes = [
  // 旧URLを新URLへ転送する
  { path: '/old-about', redirect: '/about' },

  // 名前付きルートへの転送もできる
  { path: '/dashboard', redirect: { name: 'AdminDashboard' } }
]