Vue Router は Vue SPA の公式クライアント側ルーターです。URL をコンポーネントにマッピングし、ページ全体をリロードせずに スワップし、ナビゲーション前にロジック (認証チェックなど) を実行する ナビゲーション ガード を提供します。
{ createRouter, createWebHistory } ;
routes = [
{ : , : },
{ : , : },
{ : , : (),
: { : } },
];
router = ({ : (), routes });
<template>
<RouterLink to="/users/42">Profile</RouterLink> <!-- declarative navigation -->
<RouterView /> <!-- where the matched component renders -->
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute(); // read current route: route.params.id, route.query
const router = useRouter(); // navigate programmatically: router.push("/home")
</script>
// global guard — runs before EVERY navigation (great for auth)
router.beforeEach((to, from) => {
const authed = useAuthStore().isLoggedIn;
if (to.meta.requiresAuth && !authed) {
return "/login"; // redirect: return a path (or false to cancel)
}
// returning true / nothing → allow the navigation
});
ガードは to (ターゲットルート) と from (現在のルート) を受け取り、許可、キャンセル (false)、またはリダイレクト (location を返す) ができます。meta.requiresAuth フラグ + グローバル beforeEach は認証ゲーティングの標準パターンです。
Global: router.beforeEach / afterEach — every navigation (auth, analytics)
Per-route: beforeEnter in the route config — specific routes
In-component: onBeforeRouteLeave — e.g. "unsaved changes, leave?" prompts
{ path: "/settings", component: Settings, children: [
{ path: "profile", component: Profile }, // → /settings/profile, renders in nested <RouterView>
]}
さらに: ルートパラメータ、クエリ文字列、名前付きルート、スクロール動作、およびコード分割用の遅延ロード ルートコンポーネント。
Vue Router は任意の複数ページ Vue SPA に不可欠です — クライアント側のナビゲーション (高速、リロードなし)、動的/ネストされたルート、および RouterLink/RouterView を提供します。
ナビゲーション ガードは横断的関心事の主要な機能です: 認証によるプロテクトルートのゲーティング、ページビューのログ記録、および未保存フォームからのナビゲーション防止。
認証用の meta + グローバル beforeEach パターンは、ほぼすべての実際のアプリが実装するものです。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する