How does Vue Router handle routing and guards?

Question

Accepted Answer

**Vue Router** is the official client-side router for Vue SPAs. It maps URLs to components and swaps them in **without full page reloads**, and provides **navigation guards** to run logic (like auth checks) before navigation. ## Defining routes ```js import { createRouter, createWebHistory } from "vue-router"; const routes = [ { path: "/", component: Home }, { path: "/users/:id", component: UserProfile }, // dynamic param { path: "/dashboard", component: () => import("./Dashboard.vue"), // lazy-loaded meta: { requiresAuth: true } }, // attach metadata ]; const router = createRouter({ history: createWebHistory(), routes }); ``` ## Navigating and reading params ```vue ``` ## Navigation guards — run logic before navigating ```js // 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 }); ``` Guards receive **`to`** (target route) and **`from`** (current), and can allow, cancel (`false`), or redirect (return a location). The `meta.requiresAuth` flag + a global `beforeEach` is the canonical auth-gating pattern. ## Guard levels ```text 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 ``` ## Nested routes & other features ```js { path: "/settings", component: Settings, children: [ { path: "profile", component: Profile }, // → /settings/profile, renders in nested ]} ``` Plus: route params, query strings, named routes, scroll behavior, and lazy-loaded route components for code splitting. ## Why it matters Vue Router is essential for any multi-page Vue SPA — it provides client-side navigation (fast, no reloads), dynamic/nested routes, and `RouterLink`/`RouterView`. Navigation guards are the key feature for cross-cutting concerns: gating protected routes by auth, logging page views, and preventing navigation away from unsaved forms. The `meta` + global `beforeEach` pattern for authentication is something nearly every real app implements.