mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 21:55:11 +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