v1.2.0

Live Demo →
API Documentation →

New features:

• named routes and URL generation (see the URL Generation demos, and the API specs for the urlForName and urlForPath methods)
• base URL support for non-root deployments (see the Base URL demo on the URL Generation page and the baseUrl router option API specs)

Documentation improvements and bug fixes:

#273, #265, #269, #271, #264, #256

Other:

• 159fe3f style(docs): use Lumo styles for demo page content (#268)

Full list of changes since v1.1.0

v1.2.0-pre.3

Live Demo →
API Documentation →

Changes Since v1.2.0-pre.2:

• 68095ae feat(router): add baseUrl support (#291)
• 5d1ae96 feature(location): add getUrl() method to location object (#287)
• 02f58ac feat(router): add named routes support and urlForName static helper (#285)
• be29619 fix(ci): use Firefox 62.0 in Travis for now (#289)

v1.2.0-pre.2

Live Demo →
API Documentation →

Changes Since v1.2.0-pre.1:

• a557dbe prepare v1.2.0-pre.2
• 89f2604 feat(router): add urlForPath static method to generate URLs, fixes #45

v1.2.0-pre.1

Live Demo →
API Documentation →

Changes Since v1.1.0:

• 421f9d5 Prepare v1.2.0-pre.1
• 11b3634 fix(docs): update signature and description of action and callbacks
• 69c093c fix(router): allow rendering a different component from the same route, fixes #264
• bd5f8fa add a (failing) test case for #264
• 03322a3 fix(demos) use target="_parent" for links to API docs, fixes #269
• c3f6381 fix(router): ignore all unknown action result values
• 388ccdb fix(tests): ensure lifecycle callbacks invoked after lazy loading completes
• d4cb32a fix(router): enable further route resolution if action returns HTMLElement (#275), fixes #265
• 567377a fix(router): correct error message when action returns null-proto Object (#274), fixes #273
• 159fe3f Use Lumo styles for demo page content (#268), fixes #262
• 52eb117 (chore) move related test cases closer to each other (#267)
• 0a21f99 fix an unstable test for animated transitions (#263)

v1.1.0

Live Demo →
API Documentation →

Meaningful Changes

• Re-enabled the development mode usage statistics collection, with the one-line opt-out.
  Note that all the usage-statistics related code is not included into the production bundle.
  See #241 (comment) for more context around this change.

Changes Since v1.0.0:

• b767cdf Update vaadin-usage-statistics to stable version

• c2c39e8 re-enable dev-time usage stats (with an opt-out)

v1.0.0

Live Demo →
API Documentation →

Vaadin Router 1.0.0

Vaadin Router is a small and powerful client-side router JS library. It uses the widely adopted express.js syntax for routes (/users/:id) to map URLs to Web Component views. All features one might expect from a modern router are supported: async route resolution, animated transitions, navigation guards, redirects, and more. It is framework-agnostic and works equally well with all Web Components regardless of how they are created (Polymer / SkateJS / Stencil / Angular / Vue / etc).

Vaadin.Router is a good fit for developers that do not want to go all-in with one framework, and prefer to have freedom in picking the components that work best for their specific needs.

npm install --save @vaadin/router

import {Router} from '@vaadin/router';

const router = new Router(document.getElementById('outlet'));
router.setRoutes([
  {path: '/', component: 'x-home-view'},
  {path: '/users', component: 'x-user-list'}
]);

v1.0.0-rc.1 — Release Candidate

Live Demo →
API Documentation →

Changes Since v1.0.0-rc.0:

• 7abd431 regenerate /docs (#237)
• 693610a update to the latest path-to-regexp (2.2.1) (#238)
• e9847d8 add vaadin-usage-statistics to collect anonymous stats when the app runs in the dev mode (#235)
• f80e3a8 update the router logo / remove 'under construction' (#236)
• ca537f3 stop using a custom fork of vaadin-demo-helpers (#233)
• 38fa733 fix 404 when a parent route path ends with a slash (#230)

v1.0.0-rc.0 — Release Candidate

Live Demo ↗
API documentation ↗

⚠️Breaking Changes Since v0.4.0:

• Updated the main entry in package.json to use ES module version for better tools compatibility. UMD bundle still exists, in order to use it you should include it to your project manually from the node_modules/@vaadin/router/dist/vaadin-router.umd.min.js.
• The public API has been changed significantly to be more consistent using new location object:
  • the route property on the view components is replaced with the location
  • the vaadin-router-route-changed event renamed into vaadin-router-location-changed
  • the activeRoutes property on the routes instance is replaced with location.routes
  • the router.ready property now returns a Promise which resolves in the location object
  • the context argument for the lifecycle callbacks also replaced with the location
• Added the new commands object which should be used to prevent or redirect navigation from the lifecycle callbacks or custom route actions, e. g. context.cancel() is now commands.prevent()
• Removed the possibility to return a Promise from onAfterLeave and onAfterEnter callbacks, as the feature in these cases was considered to be not reliable enough in certain edge cases. From now, only onBeforeEnter and onBeforeLeave callbacks may return a Promise
• Changed the order of the lifecycle callbacks, now onAfterEnter callbacks on the new view components get executed before onAfterLeave callbacks on the old view components
• Changed bundle property on the route config object to accept module and nomodule paths

Bug Fixes

• Lifecycle callbacks are called properly when the route is the same and only parameters changed
• Fixed the "not found page" error not processed correctly when using parent layouts
• Fixed the issue with parent layouts when nested component remained after navigation
• Fixed the silent failure for case when the children function returns incorrect result

Changes Since v0.4.0:

• c82677c Call onAfterEnter before calling onAfterLeave (#226)
• 371b92d Change the result of router.ready from outlet to location (#225)
• ffac12e Refactor animations code (#224)
• 9e79a64 Use location and commands instead of context in the public API (#222)
• 5fb5bed Fix parent layouts: update references to the unchanged elements (#223)
• f39581b Run lifecycle callbacks when only route params change (#221)
• 45b6d5e Refactor some method names, simplify the code (#219)
• 032fe09 Update bundle property to accept module and nomodule (#218)
• c759a62 Prevent suppressing not found route with nested components (#215)
• ba12cca Remove build-specific Vaadin.Router import from demo snippets (#213)
• 823e19e Simplify and comment the code that adds / removes outlet content (#216)
• 8d99e82 Fix the issue when a nested content remains on navigation (#214)
• 2c3994c Remove UMD bundle from package.json (#208)
• 5f28a9b Throw exception if children result is not array or object (#210)

v0.4.0 — Routing JS API Improvement

New Features

• Added the ability to modify routes in the runtime , using new removeRoutes method, and also addRoutes method, which now returns the resulting routes array.
• It is now possible to set children to a function, and evaluate the child routes array in the runtime. This can be done asynchronously, which is especially useful for code splitting.
• Changed the bundle property: it is now possible to pass an object and set the src property as a bundle path, and type property to module for ES module bundle loading. The Router no longer requires lazy loaded ES module bundles to have .mjs extension

Bug Fixes

• Fixed the infinite redirect issue. Router will throw the exception on more than 256 redirects
• Fixed the multiple redirects. Previously, only one redirect within the single resolve pass worked

Changes Since v0.3.0:

• 9d2e219 Accept object as a bundle property value, set type to module explicitly (#203)
• 73bba00 Expose the current active routes list in the Router API (#201)
• 68c60d5 Add bundle-specific route config demo (#200)
• 7a61bc0 Add routing JS API (#185)
• 26b97a6 Add support for multiple redirects (#194)
• 4616364 Add styles for nested components demos (#190)

v0.3.0

New Features

• Nested components: allow reusing a common parent layout as a wrapper, having a <slot> tags to render the child components into, as a light DOM children
• Animated transitions: support the animate property on the route config, and setting the CSS classes to trigger the @keyframes animation when switching between different routes
• Added onAfterLeave lifecycle callback, allowing to execute some logic right before the route component is disconnected from the DOM, without being able to cancel it
• Added the Router.go() method, allowing to trigger navigation programmatically
• Added vaadin-router-route-changed and vaadin-router-error events

Bug Fixes

• Fixed the silent failure issue when Router is initialised but not configured
• Fixed the redirect issue, previously it was not possible to go back when coming from external URL
• Fixed the missing source maps for the minified UMD bundle

Changes Since v0.2.1:

• 0f266df Use dash in router event names (#188)
• 14d3c15 Add an informative error message when router is used unconfigured (#184)
• ac32a4c Use history.replaceState when redirecting (#186)
• 24215a0 Add navigation JavaScript API (#180)
• 5b2f470 Fix the missing source maps for the minified UMD bundle (#181)
• 3e39c4e Add animated transitions (#164)
• 5cc1fe0 Support 'onAfterLeave' callback. (#174)
• e2da568 Demo and docs improvements based on feedback (#170)
• 9546fbb Support parent layouts (#169)
• bf4386b Improve lifecycle callbacks demos (#167)