v0.6.0

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