Vue Router is the official routing library for Vue.js, and it enables single-page application navigation by mapping URL paths to components. It supports nested routes for hierarchical layouts, dynamic route matching with parameters, named routes and views, and navigation guards for controlling access. The library can operate in HTML5 history mode, which produces clean URLs, or in hash mode, which is easier to deploy to static hosts that lack server-side rewrite support.
Routes are defined as an array of objects, each specifying a path and a component. Dynamic segments are introduced with a colon, so a path like /user/:id matches URLs such as /user/42 and exposes the value as route.params.id. A catch-all route such as /:pathMatch(.*)* is typically used to render a 404 page for unmatched URLs. The router instance is created with createRouter({ history: createWebHistory(), routes }) and then passed to the Vue application via app.use(router).
Programmatic navigation is performed through methods on the router instance. Calling router.push('/about') navigates to a new URL while adding an entry to the browser history, router.replace('/login') does the same without leaving a history trace, and router.go(-1) moves backward or forward through the history stack. Named routes can be targeted by passing an object like { name: 'user', params: { id: 1 } }. Navigation guards add control over when these transitions occur: beforeEach runs globally before every navigation, beforeEnter is scoped to a specific route, and beforeRouteEnter and beforeRouteLeave are defined inside components. They are commonly used for authentication checks, fetching data before a route is entered, or preventing navigation away from a page with unsaved changes.