Como o Vue Router lida com roteamento e guardas?

Question

Accepted Answer

**Vue Router** é o roteador oficial do lado do cliente para Vue SPAs. Ele mapeia URLs para componentes e os troca **sem recarregar a página completa**, e fornece **guardas de navegação** para executar lógica (como verificações de autenticação) antes da navegação. ## Definindo rotas ```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 }); ``` ## Navegando e lendo parâmetros ```vue ``` ## Guardas de navegação — execute lógica antes de navegar ```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 }); ``` Os guardas recebem **`to`** (rota de destino) e **`from`** (atual) e podem permitir, cancelar (`false`) ou redirecionar (retornar um local). A flag `meta.requiresAuth` + um `beforeEach` global é o padrão canônico de autenticação. ## Por que isso importa ```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 ``` ## Rotas aninhadas e outros recursos ```js { path: "/settings", component: Settings, children: [ { path: "profile", component: Profile }, // → /settings/profile, renders in nested ]} ``` Além disso: parâmetros de rota, strings de consulta, rotas nomeadas, comportamento de rolagem e componentes de rota carregados preguiçosamente para divisão de código. ## Por que isso importa O Vue Router é essencial para qualquer Vue SPA de múltiplas páginas — ele fornece navegação do lado do cliente (rápida, sem recarregamentos), rotas dinâmicas/aninhadas e `RouterLink`/`RouterView`. Os guardas de navegação são o recurso-chave para preocupações transversais: controlar acesso a rotas protegidas por autenticação, registrar visualizações de página e impedir navegação para longe de formulários não salvos. O padrão `meta` + `beforeEach` global para autenticação é algo que quase todos os aplicativos reais implementam.