v2.2.0

New Features

• Passing Props to Route Components

  Thanks to the contribution by @bfanger via #973!

  Instead of relying on the magic $route property, you can now use the props route config option to inject route params into route components as props.

  • Docs
  • Example

• New in-component hook: beforeRouteUpdate

  This new in-component hook is called when the route that renders this component has changed, but this component is reused in the new route.

  For example, for a route with dynamic params /foo/:id, when we navigate between /foo/1 and /foo/2, the same Foo component instance will be reused, and this hook will be called when that happens. Previously you will have to setup a watcher on $route to achieve the same.

  This hook has access to this component instance.

  • Docs
  • Example

• New router instance method: router.onReady

  This method queues a callback to be called when the router has completed the initial navigation, which means it has resolved all async enter hooks and async components that are associated with the initial route.

  This is useful in server-side rendering to ensure consistent output on both the server and the client.

• New router instance method: router.addRoutes

  Dynamically add more routes to the router. The argument must be an Array using the same route config format with the routes constructor option.

• Callbacks for router.push() and router.replace()

  You can now optionally provide onComplete and onAbort callbacks to router.push or router.replace as the 2nd and 3rd arguments. These callbacks will be called when the navigation either successfully completed (after all async hooks are resolved), or aborted (navigated to the same route, or to a different route before current navigation has finished), respectively.

• Shared Router Instance for Multiple Root Components

  Thanks to the contribution by @jhartman86 via #1108!

  It is now supported to use the same router instance to drive multiple root components on the same page.

Changes

• router.resolve return value changed to:

  {
    location: Location;
    route: Route;
    href: string;
  }

  The old resolved and normalizedTo fields are deprecated, but preserved for backwards compatibility.

• URL query encoding now better conforms to RFC3986:

  • now encodes !'()*.
  • no longer encodes ,.

Fixed

• #1060 make <router-link> usable in non-browser environments
• #1115 fix Webpack 2 code split resulting in blank component on revisit
• #1119 fix warning aliased child routes with name