Skip to content

Releases: vuejs/vue-router

v0.7.2

19 Oct 03:59
Compare
Choose a tag to compare

New

  • keep-alive now has experimental support on <router-view>.

  • All transition hooks, including the global before hook, will now be considered synchronous if: (1) The hook doesn't specify any argument; AND (2) The hook doesn't return a promise.

    For example, you can now provide a simple, synchronous global before hook:

    router.beforeEach(function (/* no argument */) {
      console.log('route changed!')
    })

    Or a synchronous activate hook:

    module.exports = {
      route: {
        activate: function (/* no argument */) {
          console.log('activated!')
        }
      }
    }

    Note if the hook specified a transition argument, then you still must call a transition method to resolve the hook.

    Also see updated docs for hook resolution rules.

Fixed

  • #187 Route data hook now only process the promise sugar syntax (returning an object containing promises) when the returned value is a plain object. This should fix cases where returning this.$http.get() using vue-resource throws warnings.
  • Fix waitForData not working if using promise sugar syntax in data hooks.
  • v-link in exact mode also matches path with a trailing slash. For example: v-link="{ path: '/a', exact: true }" will also match /a/.
  • Ensure component defined before router installation also gets access to $route.

v0.7.1

13 Oct 16:08
Compare
Choose a tag to compare
  • Use loose mode for Babel transpile output. Should result in smaller file sizes and slightly better performance.

Fixed

  • #177 Ensure $route is available in component's data function.
  • #181 Handle v-link="null"

v0.7.0

12 Oct 00:30
Compare
Choose a tag to compare

Breaking

  • Exact match class (.v-link-active-exact) has been removed. Instead, you can now use the exact option to specify the active class matching mode for a given v-link:

    <a v-link="{ path: '/', exact: true }"></a>

    This link will only have the .v-link-active class when the path matches / exactly.

New

  • v-link now has a few extra options:

    • replace

      A link with replace: true will call router.replace() instead of router.go() when clicked, so the navigation will not leave a history record.

      <a v-link="{ path: '/abc', replace: true }"></a>
    • append

      A relative link with append: true always append the relative path to the current path. For example, assuming we are navigating from /a to a relative link b, without append: true we will end up at /b, but with append: true we will end up at /a/b.

      <a v-link="{ path: 'relative/path', append: true }"></a>
    • activeClass

      This option allows a specific link to override the router's global linkActiveClass option and have its own active class.

      <a v-link="{ path: '/abc', activeClass: 'special-active' }">
  • router.go() now also supports the append option for relative paths:

    router.go({
      path: 'relative/path',
      append: true
    })
  • The $route object now also exposes the matched property, which is an array containing all the configuration objects for matched segments in the current route.

  • Router-related warnings now will also print stack traces when Vue.config.debug is set to true.

Fixed

  • Compatibility with Vue.js 1.0.0-beta.4
  • Invalid component warning showing undefined
  • Relative path resolution edge cases

v0.6.2

01 Oct 21:26
Compare
Choose a tag to compare

New

  • name is now also exposed in $route objects for named routes. Its value will always be the name of the deepest matched route that has a name.

  • v-link now also accept a replace option (thanks to @wprater):

    <a v-link="{ path: '/...', replace: true }">

    Similar to calling router.replace(path), this navigation won't leave a record in browser history.

Fixed

  • #156 v-link not working on non-anchor elements

v0.6.1

25 Sep 20:11
Compare
Choose a tag to compare

Fixed

  • Now compatible with Vue 1.0.0-beta.2. (If you are on 1.0.0-beta.1, please upgrade)

v0.6.0

09 Sep 01:19
Compare
Choose a tag to compare

New

  • Custom Route Config Fields

    Route config objects can now contain additional custom fields, which will be merged into the $route object. For example:

    router.map({
      '/a': {
        component: { ... },
        auth: true
      }
    })
    
    router.beforeEach(function (transition) {
      if (transition.to.auth) {
        // do authentication...
      }
    })
  • Multiple Global Before/After Hooks

    router.beforeEach and router.afterEach can now be called multiple times to add multiple global before/after hooks to the router. Hooks will be called in the order of creation. Before hooks can be asynchronous, and the next hook won't be called until the previous resolves. After hooks are called synchronously.

  • data Hook Promise Sugar

    When fetching data in the data hook, currently we either have to call transition.next or return a single Promise. It can become a bit cumbersome when we need to fetch from multiple endpoints, which requires us to use Promise.all to merge them into a single Promise.

    In 0.6.0, you can directly return an object hash of Promises:

    data ({ to }) {
      // assuming both services return a Promise
      return {
        fieldA: serviceA.get(to.params.id),
        fieldB: serviceB.get(to.params.id)
      }
    }

    The router will set the component's fieldA and fieldB to the corresponding Promises' resolved values when they are resolved. $loadingRouteData will be set to false when all Promises have been resolved.

  • Named Routes

    Routes can now be named:

    router.map({
      '/user/:userId': {
        name: 'user',
        component: { ... }
      }
    })

    To navigate to a named route, you can pass an object instead of a string to router.go():

    router.go({
      name: 'user',
      // can also pass params and queries
      params: { userId: 123 },
      query: { ... }
    })

    To link to a named route with v-link, see changes below.

Changed

  • v-link syntax has changed. It is no longer a literal directive - which means its value should now be a JavaScript expression. The expression value is what will be passed into router.go(), therefore it can either be a string or an object:

    <!-- literal string -->
    <a v-link="'home'">Home</a>
    
    <!-- same as above -->
    <a v-link="{ path: 'home' }">Home</a>
    
    <!-- Vue 1.0.0 literal syntax -->
    <a v-link.="home">Home</a>
    
    <!-- named route -->
    <a v-link="{ name: 'user', params: { userId: 123 }}">User</a>

Fixed

  • Should now work properly with Vue 1.0.0-alpha.3
  • Mixins containing route objects are now merged properly (1.0.0 only)
  • #109 <router-view> inside initially false v-if blocks not rendered
  • #114 v-link active class matching wrong paths

v0.5.2

23 Aug 03:06
Compare
Choose a tag to compare

Fixed

  • #82 root option not working properly on popstate

New

  • Added router.afterEach method for registering global after hook.
  • The router instance is now exposed on vm.$route as vm.$route.router (previously it was a private property _router).

v0.5.1

18 Aug 14:42
Compare
Choose a tag to compare

Fixed

  • Only abort previous ongoing transition when the new transition is successfully validated.

v0.5.0

18 Aug 14:45
Compare
Choose a tag to compare

Improvements

  • component instance is now available as this inside activate hook
  • transition object in hooks now also have the redirect method

Fixed

  • #75 $route not updated at the right timing
  • redirect not passing along query strings
  • async component onload not aborted when going to a new route
  • fixed issue when if a transition is aborted before it is activated, old view is stuck in destroyed state

Technical Preview

18 Aug 14:45
Compare
Choose a tag to compare
Technical Preview Pre-release
Pre-release
v0.4.0

[release] 0.4.0