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

Vue.js のアプリケーションが大規模化してくると、ルート構成も複雑になります。特に管理画面やCMSのような構成では、親子関係・階層構造・動的ルートが入り混じるため、Vue Router のルーティング設計が重要です。

この記事では、Vue Router を用いた多階層ルートの基本的な定義方法から、動的ルートとネスト構造の整理方法、ルートごとのレイアウト切り替えやリダイレクト制御までを実例付きで解説します。

基本のネストルート構成
動的ルートとパラメータ
複数レイアウトの管理
ルート構成の分割と整理
まとめ

基本のネストルート構成

Vue Router では、子ルートを children 配列で定義することで、親子階層のルーティングが可能です。


// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import AdminLayout from '@/layouts/AdminLayout.vue'
import Dashboard from '@/views/admin/Dashboard.vue'
import Users from '@/views/admin/Users.vue'

const routes = [
  {
    path: '/admin',
    component: AdminLayout,
    children: [
      {
        path: '',
        name: 'AdminDashboard',
        component: Dashboard
      },
      {
        path: 'users',
        name: 'AdminUsers',
        component: Users
      }
    ]
  }
]

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

export default router

この構成では、/admin 配下の全ルートで AdminLayout.vue が共通で使われ、<router-view /> に応じて子コンポーネントが表示されます。

動的ルートとパラメータ

動的なルートパラメータは :id のように定義し、詳細画面などのパターンで使用されます。


{
  path: 'users/:id',
  name: 'AdminUserDetail',
  component: () => import('@/views/admin/UserDetail.vue')
}

上記は /admin/users/123 のようにユーザーIDをURLで受け取り、this.$route.params.id または useRoute() でアクセス可能です。

複数レイアウトの管理

管理画面とユーザー向け画面で異なるレイアウトを使用したい場合、ルートの親レベルでレイアウトコンポーネントを分離して管理します。


// 一般ユーザー向けルート
{
  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 の可読性が落ちます。そのため、モジュールごとにルートを分割して管理するのが推奨されます。


// router/modules/admin.js
export default [
  {
    path: '/admin',
    component: () => import('@/layouts/AdminLayout.vue'),
    children: [
      {
        path: '',
        name: 'AdminDashboard',
        component: () => import('@/views/admin/Dashboard.vue')
      },
      {
        path: 'users',
        name: 'AdminUsers',
        component: () => import('@/views/admin/Users.vue')
      }
    ]
  }
]


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

const routes = [
  ...adminRoutes,
  {
    path: '/:pathMatch(.*)*',
    redirect: '/'
  }
]

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

export default router

このようにファイル分割することで、大規模アプリでもメンテナンスしやすくなります。