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 -> RouteLocationRawRouteLocationNormalized -> RouteLocationRouteLocationNormalized is now a location that can be displayed (not a static redirect)RouteLocationNormalizedResolved -> RouteLocationNormalizedLoadedRouteRecord -> RouteRecordRawRouteRecordNormalized -> RouteRecordRouteRecordNormalized 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