Vue Router

Vue Router is the official routing library for Vue.js applications, maintained under the vuejs GitHub organization by Eduardo San Martin Morote. It maps URL paths to component trees, supporting nested routes, dynamic path segments, and named views, and it integrates directly with the Vue reactivity system via composables like useRouter and useRoute.

Beyond basic path matching, Vue Router provides a full navigation lifecycle: global, per-route, and in-component navigation guards; async route components with data-fetching hooks; scroll behavior control; and history modes (HTML5, hash, and memory for SSR/testing). Version 5 adds first-class Vite plugin integration, a file-based routing unplugin, and a RouterView/RouterLink-driven typed-routes system that generates route name and param types automatically.

What You Get

• A createRouter() factory supporting HTML5 history, hash, and in-memory history modes
• Nested and dynamic route matching with named routes, params, and query/hash handling
• Navigation guards at the global, per-route, and in-component level, including async guards
• RouterView and RouterLink components plus useRouter/useRoute composables for the Composition API
• A Vite plugin and file-based routing unplugin that generates typed routes from your file structure
• Scroll behavior customization and lazy-loaded route components for code-splitting

Common Use Cases

• Building multi-page navigation for a Vue single-page application
• Gating routes behind authentication with navigation guards
• Code-splitting an app by lazily loading route-level components
• Generating typed, autocompletable route names and params via file-based routing
• Restoring or customizing scroll position across navigations

Under The Hood

Architecture - The library is organized around a small set of composable modules under packages/router/src: matcher/ builds and ranks a path-matching tree from route records (pathTokenizer.ts, pathParserRanker.ts), history/ abstracts over HTML5, hash, and memory navigation backends behind a common interface (history/common.ts), and router.ts ties these together in createRouter(), orchestrating resolution, guard execution (navigationGuards.ts), and Vue app integration via injectionSymbols.ts. RouterView.ts and RouterLink.ts are the rendering surface, consuming reactive route state exposed through shallowRef/shallowReactive so navigation updates propagate through Vue’s reactivity system without deep-cloning route objects on every change.

Tech Stack - Written in TypeScript and built with tsdown (a Rollup-based bundler), targeting ESM with CJS interop (index.cjs, dist/vue-router.js) and a UMD/global bundle for CDN use. Peer dependencies are vue ^3.5.34 || ^4.0.0 and, for the newer Vite/file-based routing features, vite ^7.3.0 || ^8.0.0 and @vue/compiler-sfc, all marked optional so consumers who only need the core router avoid pulling in Vite. The unplugin layer for file-based routing depends on unplugin, tinyglobby, and mlly for cross-bundler file scanning and module resolution.

Code Quality - The __tests__/ directory contains 47 test files covering the matcher, history backends, and navigation guards in isolation, run via Vitest (test:unit) alongside a separate test:types pass using tsgo/vue-tsc for type-level regression testing, plus Playwright-driven e2e/ scenarios (scroll behavior, keep-alive, suspense, multi-app). Source files are narrowly scoped by responsibility (one concern per file: encoding.ts, query.ts, scrollBehavior.ts), and public types are documented with TSDoc comments consumed by the published API docs.

API Design - The public surface favors composables (useRouter, useRoute) over injected globals, mirroring Vue 3’s Composition API conventions, and getting started requires only passing a routes array to createRouter() and calling app.use(router) — no boilerplate provider wiring beyond that. Multiple entry points (vue-router, vue-router/auto, vue-router/vite, vue-router/unplugin) let consumers opt into typed/file-based routing incrementally rather than committing to it upfront, and TypeScript augmentation via TypesConfig lets advanced users swap the public Router type without forking the library.