addRoute
(8744bba)undefined
in NavigationGuardNext (#1059) (6cce232)useLink()
(aab8c04), closes #1003This release is a correct tag and doesn't contain any extra changes.
LocationQueryValueRaw
as internal (dc02850)router: The router.go()
methods doesn't return anything
(like in Vue Router 3) anymore. The existing implementation was wrong as it
would resolve the promise for the following navigation if router.go()
was called with something that wasn't possible e.g. router.go(-20)
right after entering the application would not do anything. Even worse,
the promise returned by that call would resolve after the next
navigation. There is no proper native API to implement this
promise-based api properly, but one can write a version that should work
in most scenarios by setting up multiple hooks right before calling
router.go()
:
export function go(delta) {
return new Promise((resolve, reject) => {
function popStateListener() {
clearTimeout(timeout)
}
window.addEventListener('popstate', popStateListener)
function clearHooks() {
removeAfterEach()
removeOnError()
window.removeEventListener('popstate', popStateListener)
}
// if the popstate event is not called, consider this a failure
const timeout = setTimeout(() => {
clearHooks()
reject(new Error('Failed to use router.go()'))
// It's unclear of what value would always work here
}, 10)
setImmediate
const removeAfterEach = router.afterEach((_to, _from, failure) => {
clearHooks()
resolve(failure)
})
const removeOnError = router.onError(err => {
clearHooks()
reject(err)
})
router.go(delta)
})
}
types: there is already an existing type named ScrollBehavior
,
so we are renaming our type to avoid any confusions and allow the user
to use both types at the same type (which given what the existing
ScrollBehavior
type is designed for, will likely happen).
Build related fixes
onBeforeRouteLeave
and onBeforeRouteUpdate
used to
have access to the component instance through instance.proxy
but given
that:
internal
(https://github.com/vuejs/vue-next/pull/1849)setup
, all variables are accessible on the scope (and
should be accessed that way because the code minimizes better)
It has been removed to prevent wrong usage and lighten Vue RouterFix build cache issues
router: the history property was marked as internal already. Since we
need to pass the history instance to the router, we always have access to it,
differently from Vue Router 3 where the history was instantiated internally.
The history API was also internal (it wasn't documented), so this change
shouldn't be a problem as people shouldn't be relying on router.history
in
their apps. If you think this property is needed, please open an issue to
discuss the use case. Note it's already accessible as you have to create it:
export const history = createWebHistory()
export const router = createRouter({ history, routes: [] })
history: HistoryLocation is just a string now. It was pretty much an
internal property but it could be used inside history.state
. It used to be an
object { fullPath: '/the-url' }
. And it's now just the fullPath
property.
scroll: this change follows the RFC at https://github.com/vuejs/rfcs/pull/176:
selector
is renamed into el
el
also accepts an Element
left
and top
are passed along el
instead of inside an object
passed as offset
scroll: scrollBehavior
doesn't accept an object with x
and y
coordinates anymore. Instead it accepts an object like
ScrollToOptions
with left
and top
properties. You can now also pass the
behavior
property to enable smooth scrolling in most browsers.
It is now necessary to escape id selectors like
explained at https://mathiasbynens.be/notes/css-escapes. This was
necessary to allow selectors like #container > child
.
/#/
, otherwise it
will result in a url starting with #/
. This allows users to use the routing
system directly in simple files without needing to configure a server at all:
https://example.com/file.html
+ base: 'file.html
will produce a final
url of https://example.com/file.html#/
https://example.com/folder
+ base: 'folder
will produce a final url of
https://example.com/folder#/
https://example.com/folder
+ base: 'folder/
will produce a final url of
https://example.com/folder/#/
$route
and $router
types (a4f80aa)router.afterEach
and router.onError
are now the global equivalent of
router.push
/router.replace
as well as navigation through the interface
(history.go()
). A navigation only rejects if there was an unexpected error.
A navigation failure will still resolve the promise returned by router.push
and be exposed as the resolved value.href
propertycustom
prop (874510b)RouteLocation
-> RouteLocationRaw
RouteLocationNormalized
-> RouteLocation
RouteLocationNormalized
is now a location that can be displayed (not a static redirect)RouteLocationNormalizedResolved
-> RouteLocationNormalizedLoaded
RouteRecord
-> RouteRecordRaw
RouteRecordNormalized
-> RouteRecord
RouteRecordNormalized
is now a record that is not a static redirectnext
(d76c6aa)useRoute
now retrieves a reactive RouteLocationNormalized instead of a Ref.
This means there is no need to use .value
when accessing the route. You still need to wrap it with toRefs
if you want to expose parts of the route:
setup () {
return { params: toRefs(useRoute()).params }
}
createHistory
is now named createWebHistory
.
createHashHistory
is now named createWebHashHistory
.Both createHistory and createHashHistory are renamed to better reflect that they must be used in a browser environment while createMemoryHistory doesn't.
mode: 'history'
-> history: createHistory()
/*
) must now be defined using a parameter with a custom regex: /:catchAll(.*)
keep-alive
is not yet supportedbeforeRouteEnter
yet