mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 05:35:13 +00:00
docs: add docs for preloadRouteComponents
(#9607)
This commit is contained in:
parent
1067c6ccc5
commit
ce4d29031e
@ -0,0 +1,40 @@
|
||||
---
|
||||
title: "preloadRouteComponents"
|
||||
---
|
||||
|
||||
# `preloadComponents`
|
||||
|
||||
`preloadRouteComponent` allows you to manually preload individual pages in your Nuxt app.
|
||||
|
||||
> Preloading routes loads the components of a given route that the user might navigate to in future. This ensures that the components are available earlier and less likely to block the navigation, improving performance.
|
||||
|
||||
::alert
|
||||
Nuxt already automatically preloads the necessary routes if you're using the `NuxtLink` component.
|
||||
::
|
||||
::ReadMore{link="/docs/api/components/nuxt-link"}
|
||||
::
|
||||
|
||||
## Example
|
||||
|
||||
Preload a route when using `navigateTo`.
|
||||
|
||||
```ts
|
||||
// we don't await this async function, to avoid blocking rendering
|
||||
// this component's setup function
|
||||
preloadRouteComponents('/dashboard')
|
||||
|
||||
const submit = async () => {
|
||||
const results = await $fetch('/api/authentication')
|
||||
|
||||
if (results.token) {
|
||||
await navigateTo('/dashboard')
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
::ReadMore{link="/docs/api/composables/navigate-to"}
|
||||
::
|
||||
|
||||
::alert{icon=👉}
|
||||
Currently, on server, `preloadRouteComponents` will have no effect.
|
||||
::
|
Loading…
Reference in New Issue
Block a user