Miten Vue Router käsittelee reititystä ja vartiointia?

Question

Accepted Answer

**Vue Router** on Vue SPA:iden virallinen asiakaspuolen reititin. Se yhdistää URL-osoitteet komponentteihin ja vaihtaa ne **ilman kokonaisen sivun uudelleenlatausta**, ja tarjoaa **navigointivartijoita** logiikan suorittamiseen (kuten todennustarkistuksien) ennen navigointia. ## Reittien määrittäminen ```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 }); ``` ## Navigointi ja parametrien lukeminen ```vue ``` ## Navigointivartijoita — suorita logiikkaa ennen navigointia ```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 }); ``` Vartijoita vastaan tulevat **`to`** (kohdereitta) ja **`from`** (nykyinen), ja ne voivat sallia, peruuttaa (`false`) tai uudelleen ohjata (palauttaa sijainnin). Merkintö `meta.requiresAuth` + globaali `beforeEach` on kanoninen todennusportin kuviointi. ## Vartioiden tasot ```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 ``` ## Sisäkkäiset reitit & muut ominaisuudet ```js { path: "/settings", component: Settings, children: [ { path: "profile", component: Profile }, // → /settings/profile, renders in nested ]} ``` Lisäksi: reittien parametrit, kyselyjonot, nimetyt reitit, vierityksen toiminta ja laiskasti ladattavat reittikomponentit koodin jakamiseen. ## Miksi sillä on merkitystä Vue Router on olennainen mille tahansa monisivuiselle Vue SPA:lle — se tarjoaa asiakaspuolen navigoinnin (nopea, ei uudelleenlatauksia), dynaamisia/sisäkkäisiä reittejä ja `RouterLink`/`RouterView`. Navigointivartijoat ovat avainominaisuus poikkisuuntaisille huolille: suojattujen reittien vaatiminen todennuksella, sivunäkymien kirjaaminen ja navigoinnin estäminen pois tallennettujen lomakkeiden poistamisesta. Kuvio `meta` + globaali `beforeEach` todennukselle on jotain, jonka lähes jokainen todellinen sovellus toteuttaa.