Releases: vuejs/vue-router
v0.7.2
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 returningthis.$http.get()
usingvue-resource
throws warnings. - Fix
waitForData
not working if using promise sugar syntax indata
hooks. v-link
inexact
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
v0.7.0
Breaking
-
Exact match class (
.v-link-active-exact
) has been removed. Instead, you can now use theexact
option to specify the active class matching mode for a givenv-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 callrouter.replace()
instead ofrouter.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 linkb
, withoutappend: true
we will end up at/b
, but withappend: 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 theappend
option for relative paths:router.go({ path: 'relative/path', append: true })
-
The
$route
object now also exposes thematched
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 totrue
.
Fixed
- Compatibility with Vue.js 1.0.0-beta.4
- Invalid component warning showing
undefined
- Relative path resolution edge cases
v0.6.2
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 areplace
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
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
androuter.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 SugarWhen fetching data in the
data
hook, currently we either have to calltransition.next
or return a single Promise. It can become a bit cumbersome when we need to fetch from multiple endpoints, which requires us to usePromise.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
andfieldB
to the corresponding Promises' resolved values when they are resolved.$loadingRouteData
will be set tofalse
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 intorouter.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
v0.5.2
v0.5.1
v0.5.0
Improvements
- component instance is now available as
this
insideactivate
hook transition
object in hooks now also have theredirect
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
v0.4.0 [release] 0.4.0