vuejs/vue-router

This system is Vue Router, a client-side routing library for Vue.js applications that manages navigation between views using URL history or hash modes. It provides core components like RouterLink and RouterView, along with advanced features such as nested routes, route guards, lazy loading, and custom scroll behavior. The library supports both Options API and Composition API patterns, offering type-safe definitions for TypeScript and Flow, and includes comprehensive tooling for building, testing, and documentation.

27 changes.

This period focused on modernizing Vue Router 3.6.5 by introducing Vue 2.7 Composition API support and refactoring the internal architecture into modular matcher, history, and utility components. The work also included establishing robust type safety through Flow and TypeScript definitions, upgrading the build system to Rollup with ESM support, and expanding comprehensive unit, end-to-end, and interactive documentation examples.

11 changes.

This period focused on introducing Vue 2.7-compatible Composition API composables and expanding the example suite to demonstrate advanced routing patterns. It also included migrating the documentation site from GitBook to VuePress and automating the release workflow.

A new ESM entry point (src/entries/esm.js) is now available alongside the existing CommonJS entry. This module exports the main VueRouter instance, the RouterLink and RouterView components, version information, and navigation failure utilities (isNavigationFailure, NavigationFailureType, START\_LOCATION). The entry explicitly excludes composables to maintain compatibility with older Vue versions.

src/entries · high confidence

This change introduces Flow type definitions for the router, covering core types such as Route, RouteRecord, and RouterOptions, as well as navigation guards (beforeEnter) and route configuration options like case sensitivity and custom query parsing. This enables static type checking for applications using the router, helping developers catch errors related to route definitions, navigation guards, and router configuration at compile time.

flow · high confidence

Added a new example demonstrating a Vue.js authentication flow, including route guards for protected pages, login/logout functionality using localStorage, and a simulated authentication service.

examples/auth-flow · high confidence

A new basic example has been added to demonstrate Vue Router configuration in history mode, including routes with unicode characters, query parameters, and custom event listeners on router-link components. The example also includes a mechanism to track popstate event listeners and demonstrates navigation guards with delays.

examples/basic · high confidence

A new example application has been added to the \examples/composables\ directory, showcasing the usage of Vue Router's Composition API functions (\useRoute\, \useRouter\, \useLink\, \onBeforeRouteUpdate\, and \onBeforeRouteLeave\) within Vue components. The example includes a multi-page setup with navigation, nested routes, and route guards, providing a reference implementation for integrating these composables in a Vue application.

examples/composables · high confidence

Added Vue components (App, Login, Dashboard, About) that implement a basic authentication example, including login form handling, route-based navigation, and session state management.

examples/auth-flow/components · high confidence

A new example in the discrete-components section demonstrates how to keep the Vue Router state synchronized across multiple independent Vue instances. By extending a base Vue constructor with the router and instantiating it on multiple DOM nodes, the example shows that navigation in one instance updates the $route.path value in all others, ensuring consistent routing behavior in multi-instance applications.

examples/discrete-components · high confidence

New example applications have been added to demonstrate Vue Router features. The 'named-views' example shows how a single route can define multiple named components rendered into corresponding \<router-view\> elements. The 'nested-routes' example demonstrates child routes, including absolute paths within nested definitions, named children, and passing relative params to named routes.

examples/nested-routes · high confidence

The hash-mode example now includes a demonstration of Unicode route handling and a mechanism to track popstate event listeners. The app.js file introduces a counter that displays the number of active popstate listeners, helping to verify that listeners are correctly removed when the Vue instance is destroyed. It also defines routes with Unicode characters (e.g., /é) and query parameters to test encoding and decoding behavior in hash mode.

examples/hash-mode · high confidence

A new example application has been added to demonstrate how to implement custom scroll behavior in Vue Router when using hash mode. The example includes a router configuration that defines a \scrollBehavior\ function, allowing users to see how to restore saved positions, scroll to specific anchors (with optional offsets), and programmatically scroll to the top based on route meta fields.

examples/hash-scroll-behavior · high confidence

The examples directory now includes new interactive demos for managing multiple Vue Router instances within a single page (multi-app), nesting routers inside components (nested-router), and handling app mounting/unmounting cycles (restart-app). These examples demonstrate how to properly initialize, destroy, and track state for router instances, including cleanup of event listeners and navigation guards. A central index page and shared build configuration (webpack.config.js) have been added to serve and bundle these examples locally.

examples · high confidence

The examples/lazy-loading directory now includes a complete demo showing how to use Vue Router with Webpack's dynamic import() syntax for route-level code splitting. The example features individual lazy-loaded components (Foo) and grouped components (Bar and Baz) that share a named chunk via webpackChunkName comments, illustrating how to reduce initial bundle size and load routes on demand.

examples/lazy-loading · high confidence

A new example application has been added to demonstrate various routing redirect capabilities, including relative and absolute redirects, dynamic redirects based on query parameters or hash fragments, named redirects, redirects with parameters, case-sensitive matching, and catch-all redirects.

examples/redirect · high confidence

The examples/route-alias location now includes a complete Vue Router demonstration showing how route aliases work, including absolute aliases, relative aliases, multiple aliases, default child routes using an empty string alias, and nested aliases.

examples/route-alias · high confidence

A new interactive example demonstrating Vue Router's path-to-regexp matching capabilities has been added to the examples directory. It showcases various route patterns including standard parameters, optional parameters, regex-constrained parameters, wildcard matching, and optional path groups, allowing users to see how different URL structures are matched and rendered in a Vue application.

(repo-wide) · high confidence

Added a new example in the examples/route-params directory that demonstrates how to use named routes with parameters in Vue Router. The example includes an HTML entry point and a JavaScript application that defines nested routes, allowing users to navigate between different log types (e.g., 'info') using named links while displaying dynamic route parameters in the UI.

examples/route-params · high confidence

The examples/route-props directory now includes a working demo showing how to pass props to components from vue-router. The example features a Hello.vue component that accepts a 'name' prop and displays additional attributes via $attrs. The app.js configuration demonstrates four distinct routing strategies: static prop values, passing route parameters directly to props, using a dynamic function to compute props from route data, and passing static props alongside router-view attributes.

examples/route-props · high confidence

Added a new example in the examples/scroll-behavior directory that demonstrates how to implement custom scroll behavior in Vue Router. The example shows how to handle anchor links with specific offsets (e.g., \#anchor2), bypass ID selectors starting with numbers, and use promises to wait for transitions to complete before scrolling. It also illustrates using meta fields to control scroll-to-top behavior for matched routes.

examples/scroll-behavior · high confidence

Added a new example in the \examples/transitions\ directory that demonstrates how to implement animated transitions between routes using Vue Router. The example includes an \app.js\ file configuring a router with nested routes and a \Parent\ component that uses the \beforeRouteUpdate\ navigation guard to dynamically switch between 'slide-left' and 'slide-right' transition names based on route depth. It also features a global fade transition for top-level route changes and corresponding CSS styles in \index.html\ to handle the visual effects.

examples/transitions · high confidence

A new example application has been added to demonstrate the usage of Vue Router with keep-alive. The example includes a nested routing structure with multiple levels of router-views wrapped in keep-alive components, route guards, and prop passing scenarios to illustrate how to preserve component state across navigation.

examples/keepalive-view · high confidence

A new example application has been added to the examples/router-errors directory to demonstrate four specific Vue Router navigation error scenarios: duplicated navigation, cancelled navigation, redirected navigation, and aborted navigation. The example includes an app.js file that configures a Vue Router instance with a beforeEach guard handling query parameters to trigger these states, and an index.html file providing the basic routing UI.

examples/router-errors · high confidence

The repository now includes a new release script (scripts/release.sh) that automates the build, versioning, changelog generation, and publishing steps for releases, including a confirmation prompt and publishing to the 'legacy' npm tag. Additionally, a commit message verification script (scripts/verifyCommitMsg.js) has been added to enforce a specific commit message format required for automated changelog generation, rejecting messages that do not match the defined pattern.

scripts · high confidence

This change introduces the foundational TypeScript declaration files for the library, establishing the type system for the core router instance, route configurations, and navigation guards. It defines the \VueRouter\ class with its methods (such as \push\, \replace\, \addRoute\, and \resolve\), exports key types like \Route\, \NavigationGuard\, and \NavigationFailureType\, and sets up module augmentation to attach \$router\ and \$route\ to Vue's instance and component options. Additionally, it includes a new \composables.d.ts\ file that provides type definitions for composition API functions like \useRoute\, \useRouter\, and \useLink\, enabling type-safe usage of these utilities in Vue 3-style components.

types · high confidence

The build process has been replaced with a new Rollup-based configuration that generates multiple output formats, including UMD, CommonJS, and ES modules. This change introduces new entry points for ES modules (esm.js) and composables, allowing users to import specific parts of the library or use modern module syntax in browser environments. The build script now handles minification with Terser and generates gzipped sizes for production builds.

build · high confidence

This change introduces the core \RouterLink\ and \RouterView\ components for client-side navigation. \RouterLink\ allows users to create navigation links with support for active class styling, exact matching, custom slots, and accessibility attributes like \aria-current\. \RouterView\ renders the matched component for the current route, supporting nested views, named slots, and keeping-alive instances when routes change. These components form the foundation of the routing UI layer.

src/components · high confidence

This change introduces a new set of composables in src/composables to support Vue 2.7+ usage of Vue Router features. It adds useLink() for programmatic navigation and active-state tracking (isActive/isExactActive), onBeforeRouteUpdate() and onBeforeRouteLeave() for component-level navigation guards, and useRouter()/useRoute() helpers to access the router instance and current route within the setup context. These utilities allow components to handle routing logic and guard conditions directly in their setup functions, improving developer experience and consistency with Vue 3 patterns while maintaining compatibility with Vue 2.7.

src/composables · high confidence

This release adds a new \vue-router/composables\ submodule (exposed via \composables.js\, \composables.mjs\, and \composables.d.ts\) that brings Vue Router 4-style composition APIs (\useRoute\, \useRouter\, \useLink\, \onBeforeRouteUpdate\, \onBeforeRouteLeave\) to Vue 2.7 users, allowing them to use the Composition API for routing logic. The build system has been updated to use Babel with \env\ and \flow-vue\ presets (via the new \.babelrc\) and ESLint with \flowtype\ support (via \.eslintrc\), replacing the previous Rollup/Buble configuration. Additionally, the project now uses Prettier for code formatting (\.prettierrc\) and Flow for type checking (\.flowconfig\).

(repo-wide) · high confidence

The history mode implementations (HTML5, Hash, and Abstract) have been refactored to extend a new shared \History\ base class located in \src/history/base.js\. This change consolidates common routing logic—such as route matching, transition confirmation, navigation guard execution, and scroll handling—into the base class, while each specific history mode now only implements browser-specific methods like \push\, \replace\, and \go\. This structural change improves code maintainability and ensures consistent behavior across different history modes.

src/history · high confidence

The internal implementation of the router has been restructured by extracting core logic into dedicated modules within the \src/util\ directory. This change introduces separate files for handling asynchronous component resolution (\async.js\, \resolve-components.js\), DOM and browser state management (\dom.js\, \push-state.js\, \state-key.js\), and scroll behavior (\scroll.js\). It also isolates path and query manipulation into \path.js\, \query.js\, and \location.js\, while moving route creation and comparison logic to \route.js\ and error handling to \errors.js\. This modularization improves code organization and maintainability without altering the public API.

src/util · high confidence

The router's internal structure has been reorganized to improve modularity and maintainability. The route matching logic has been extracted from the main router class into a dedicated \create-matcher\ module, which now handles route registration, path-to-regexp compilation, and route resolution. Similarly, history management (hash, HTML5, and abstract modes) has been moved into separate modules under a \history\ directory, allowing the core router to focus on lifecycle and hook management. This separation clarifies responsibilities and makes it easier to extend or replace specific parts of the routing system.

src · high confidence

The active-links example now demonstrates more complex navigation scenarios, including active state handling for named routes with exact matching, absolute paths in nested routes, and the ability to apply the active class to an outer element via the \tag\ prop. It also introduces the \exact-path\ prop, which allows links to match only when the path and query parameters match exactly, without considering hash fragments or additional query keys.

examples/active-links · high confidence

The documentation site has been migrated from GitBook to VuePress. This change updates the build configuration (book.json) to use the VuePress theme and sets the deployment domain to router.vuejs.org. It also introduces a new language index (LANGS.md) to support multiple locales (English, French, Japanese, Chinese, German, Russian, Korean, Spanish) and includes a CircleCI configuration to ignore the gh-pages branch during builds.

docs-gitbook · high confidence

The distributed build files in the dist folder have been updated to vue-router v3.6.5. This release includes a fix to the URL encoding logic to be more conformant with RFC3986, specifically by escaping characters like \[!'()\*\] and preserving commas in query strings, which may affect how URLs are generated or parsed in applications relying on these specific characters.

dist · high confidence

Added TypeScript type tests for Vue Router; Added e2e test suite for vue-router features; Added end-to-end test infrastructure with local and BrowserStack support; Added unit tests for Vue Router core utilities and navigation behavior.

The project has been upgraded to version 3.6.5, introducing official ES Module (ESM) builds alongside CommonJS, enabling better tree-shaking and modern bundler compatibility. The build system has migrated from legacy Rollup plugins to @rollup/plugin-commonjs and @rollup/plugin-node-resolve, and the dependency on path-to-regexp has been updated to version 1.8.0. Additionally, the package now includes TypeScript type definitions and exposes composables for use in Vue 2.7+ applications.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 50 → 45 (-4.6)
• Rubric changed (rubric-2026.09.11 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 45 → 45 (+0.0)
• Architecture 99 → 97 (-2.5)
• Maturity 50 → 50 (+0.0)
• Readiness 49 → 37 (-12.1)
• Security 59 → 65 (+6.6)
• Accessibility 60 → 60 (+0.0)

• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
• Documentation: written for insiders (docs/ru/api/README.md)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• Medium CVE: [GHSA redacted] (yarn.lock)

• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (the committed lockfile resolved no direct production dependency)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• Medium vulnerability: [GHSA redacted] (yarn.lock)

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

vuejs/vue-router was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.