$ npm install vue-router
The current codebase has most of the existing features on Vue Router v3.x and is usable. It supports all the merged RFCs.
Since the library is still unstable and because we want feedback on bugs and missing features, it will probably go through a few breaking changes.
mode: 'history'
-> history: createWebHistory()
base
option is now passed as the first argument to createWebHistory
(and other histories)/*
) must now be defined using a parameter with a custom regex: /:catchAll(.*)
router.match
and router.resolve
are merged together into router.resolve
with a slightly different signaturerouter.getMatchedComponents
is now removed as they can be retrieved from router.currentRoute.value.matched
:router.currentRoute.value.matched
.map(record => Object.values(record.components))
.flat()
transition
, you need to wait for the router to be ready before mounting the app:app.use(router)
// Note: on Server Side, you need to manually push the initial location
router.isReady().then(() => app.mount('#app'))
Otherwise there will be an initial transition as if you provided the appear
prop to transition
because the router displays its initial location (nothing)These are technically breaking changes but they fix an inconsistent behavior.
/
and displaying nothing.router.resolve
) or pushing (router.push
) a location with missing params no longer warns and produces an invalid URL (/
), but explicitly throws an Error instead.path
does not append a trailing slash (/
) anymore to make it consistent across all routes:
strict: true
to a route record or pathOptions: { strict: true }
to the router options (alongside routes
) will disallow an optional trailing slashbeforeEach
navigation guard that ensures the presence of a trailing slashredirect
on an empty path are not supported anymore. Use named routes instead:// replace
let routes = {
path: '/parent',
children: [{ path: '', redirect: 'home' }, { path: 'home' }],
}
// with
let routes = {
path: '/parent',
children: [
{ path: '', redirect: { name: 'home' } },
{ path: 'home', name: 'home' },
],
}
Note this will work if path
was /parent/
as the relative location home
to /parent/
is indeed /parent/home
but the relative location of home
to /parent
is /home
KeepAlive
is only partially supported. Namely, the context (this
) is not working properlybeforeRouteEnter
doesn't invoke its callbackSee Contributing Guide.
© 2010 - cnpmjs.org x YWFE | Home | YWFE