vue-router

このスキルを使うタイミング

次のことをユーザーが希望する場合は、いつでもこのスキルを使用してください。

• Vue 2 または Vue 3 プロジェクトでルーティングを設定する
• 動的ルート、ネストされたルート、名前付きルートを実装する
• ナビゲーションガード（beforeEach、beforeResolve、afterEach）を設定する
• router.push、router.replace を使ってプログラムによるナビゲーションを実装する
• コード分割のために遅延読み込みルートを実装する
• 権限やレイアウト制御のためにルートの meta フィールドを扱う

このスキルの使い方

ワークフロー

1. Vue のバージョンを特定する（Vue 2 は Vue Router 3.x、Vue 3 は Vue Router 4.x を使用します）
2. 適切な API でルートを設定する
3. 認証と認可のためにナビゲーションガードを追加する
4. 大きなページコンポーネントの遅延読み込みを実装する

1. Vue Router 4（Vue 3）のセットアップ

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: () => import('./views/Home.vue') },
  { path: '/users/:id', component: () => import('./views/UserDetail.vue'), props: true },
  {
    path: '/admin',
    component: () => import('./views/Admin.vue'),
    meta: { requiresAuth: true },
    children: [
      { path: 'dashboard', component: () => import('./views/AdminDashboard.vue') },
    ],
  },
];

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

// Navigation guard
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { path: '/login' };
  }
});

export default router;

2. Vue Router 3（Vue 2）のセットアップ

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: () => import('./views/Home.vue') },
    { path: '/about', component: () => import('./views/About.vue') },
  ],
});

3. プログラムによるナビゲーション

// Vue 3 with Composition API
import { useRouter } from 'vue-router';

const router = useRouter();
router.push({ name: 'user', params: { id: '123' } });
router.replace('/home');
router.go(-1);

ベストプラクティス

• 権限チェック用のルートガードを一元化し、大きなページコンポーネントは遅延読み込みします
• 型安全なナビゲーションには params／query を使った名前付きルートを使用し、ルートに機密データを保存しないでください
• すっきりした URL を実現するには createWebHistory を優先し、HTML5 history モード用のサーバー側フォールバックを設定します
• レイアウト制御、パンくずリスト、アクセス制御にはルートの meta フィールドを使用します

リソース

• Vue Router 4：https://router.vuejs.org/
• Vue Router 3：https://v3.router.vuejs.org/

キーワード

Vue ルーター、ルーティング、ナビゲーションガード、Vue 3、Vue 2、遅延読み込み、動的ルート、ネストされたルート、meta フィールド、プログラムによるナビゲーション、createRouter