vuejs/router
### [`v4.1.0`](https://togithub.com/vuejs/router/releases/tag/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 `` component to reuse the `path` structure. You can now simplify this to:
```diff
- 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](https://developer.mozilla.org/en-US/docs/Web/API/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:
```js
// 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](https://togithub.com/vuejs/router/blob/main/packages/router/e2e/modal/index.ts), 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](https://developer.mozilla.org/en-US/docs/Web/API/History/state) for more information about the `state` property.
Given the nature of the ``'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:
```js
import { loadRouteLocation } from 'vue-router'
const loadedRoute = await loadRouteLocation(router.resolve('/users/24'))
```
#### Typed Routes
In v4.1 we were initially planning to introduce types to automatically detect the params from a `path` property, creating autocomplete and type safety in `router.push()` and ``'s `to` prop. It was implemented but also turned out to be **extremely slow** after ~50 routes due to the nature of the types relying on nesting and complex unions. **Instead, we are introducing a build plugin** to generate the types of the routes for you based your **file structure**. This is similar to [Nuxt](https://nuxtjs.org/) and [Vite Plugin Pages](https://togithub.com/hannoeru/vite-plugin-pages) but with full type support (similar to [nuxt-typed-router](https://togithub.com/victorgarciaesgi/nuxt-typed-router)) **while allowing you to keep using the exact same API**, just with Autocompletion and typing hints 😄. The plugin currently supports Vite, Webpack (with some caveats), and rollup and **it's currently experimental** to gather feedback from the community and build a flexible solution. We hope to release a stable version in the following months.
[Check out the plugin](https://togithub.com/posva/unplugin-vue-router) GitHub repository for installation instructions and documentation.
Here are some other examples of how much this plugin can improves your developer experience:
||||
|-|-|-|
#### CJS/MJS support for Node
We now expose a few extra entry points for Node but kept the old ones as well to prevent any disruption to the existing users. You can find more information about this [in the corresponding pull request](https://togithub.com/vuejs/router/pull/1157).
***
Please refer to [CHANGELOG.md](https://togithub.com/vuejs/router/blob/main/CHANGELOG.md) for details.
Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Enabled.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
[ ] If you want to rebase/retry this PR, click this checkbox.
This PR has been generated by Mend Renovate. View repository job log here.
This PR contains the following updates:
4.0.16->4.1.0Release Notes
vuejs/router
### [`v4.1.0`](https://togithub.com/vuejs/router/releases/tag/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 `Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Enabled.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR has been generated by Mend Renovate. View repository job log here.