v4.1.3
Please refer to CHANGELOG.md for details.
v4.1.2
Please refer to CHANGELOG.md for details.
v4.1.1
Please refer to CHANGELOG.md for details.
v4.1.0
Vue Router 4.1
We are excited to announce the release of Vue Router 4.1 with a few new interesting features, better support for Node ESM and no breaking changes.
Omitting the component/components option in routes
It's now possible to completely omit the component option when defining routes with children. While nested routes are about defining layouts, they are also directly connected to a path and users often found themselves defining a pass through component that would just render a <RouterView> component to reuse the path structure. You can now simplify this to:
- import { RouterView } from 'vue-router'
- import { h } from 'vue'
-
const routes = [
{
path: '/admin',
- component: () => h(RouterView),
children: [
{ path: 'users', component: AdminUserList },
{ path: 'users/:id', component: AdminUserDetails },
],
},
]
In other words, you can now nest paths without having to define a component.
Passing History State in navigations
Passing History State through router.push() has been implemented and used by the router since its version 4.0 but hasn't been exposed as a public API until now. This enables passing a state property when calling router.push() or router.replace(). This is useful to pass global state to be associated with the history entry that cannot be shared by copying the URL. One common example of this are Modals:
// go to /users/24 but show a modal instead
router.push({ name: 'UserDetail', params: { id: 24 } state: { backgroundView: ... } })
To see a full example, check the modal e2e test, it has been updated to use the state property.
It's worth noting this shouldn't be used to pass fetched data or complex objects such as classes because of type and size limitations. Check the History State documentation for more information about the state property.
Given the nature of the <RouterView>'s route prop, there is also a new function loadRouteLocation() that can be used on a resolved route location to load a route with lazy loading:
... (truncated)
1 May 13, 2022
19 Dec 14, 2022
44 Aug 5, 2022
22 Nov 18, 2022
1 Aug 11, 2022
6 Dec 21, 2022
10 Nov 18, 2022
15 Nov 7, 2021
11 Aug 9, 2022
0 Aug 5, 2022
9 Jun 8, 2022
0 Jan 3, 2022
6 Jan 19, 2022
2 Nov 7, 2022
42 Dec 15, 2022
66 Nov 24, 2022
2 Feb 10, 2022
2 Nov 1, 2022
0 Dec 8, 2021
0 Jan 30, 2022