NuxtLink and Prefetching
Understand routing by using NuxtLink and discover how Nuxt will prefetch routes.
We'll cover the following...
Switching between pages manually by changing the URL is not practical for users and a better way is to provide navigation links. The traditional way of switching between pages with HTML is by using the anchor tag <a>:
<a href="https://example.com">Go to link</a>
The NuxtLink component
Nuxt has a component called NuxtLink. Behind the scenes, NuxtLink still renders an <a> element, but has some additional benefits. The href attribute is automatically set to the route of the page, and a full page refresh (default with <a>) is prevented so the router can handle navigation. We can additionally add page transitions if needed.
Run and open the following code example in a new browser tab. You can click the links to visit each page and use the browser’s previous page button to return home:
<script setup>
// The useRoute composable returns the current route, and we can
// then access the params named id (matches the file name)
const route = useRoute();
const userId = route.params.id;
</script>
<template>
<p>{{ userId }}</p>
<ul>
<li><NuxtLink to="/">home</NuxtLink></li>
</ul>
</template>
...