How does routing work in a Vue single-page app?
Quick Answer
Vue Router maps URL paths to components rendered in <router-view>, without a full page reload. It supports dynamic segments (/users/:id), nested routes, lazy-loaded route components (code splitting), and navigation guards (beforeEach) for auth checks and redirects.
Vue Router matches the URL to a component and swaps it into <router-view> without reloading the page. Routes can have dynamic parameters like /users/:id and can be nested. Two things I always set up: history mode for clean URLs, which needs the server to fall back to index.html for unknown paths, and navigation guards — a global beforeEach that checks authentication and redirects to login. I also lazy-load route components with a dynamic import so each page is its own bundle chunk and the initial load is small.
- History mode uses clean URLs (needs a server fallback to
index.html); hash mode uses/#/pathand works without server config. - Guards: global
beforeEach, per-routebeforeEnter, in-componentbeforeRouteEnter. - Lazy load:
component: () => import('./views/Dashboard.vue')so each route is a separate chunk. - Access params via
route.params.id; watch them because the component is reused when only the param changes.