Move between routes with NuxtLink, navigate from code with navigateTo, and highlight the active link.
Why: <NuxtLink> is the way to move between pages. It does a fast client-side transition (no full reload) and prefetches the target when it scrolls into view, so navigation feels instant. Note: it’s auto-imported.
<template>
<nav>
<NuxtLink to="/">Home</NuxtLink>
<NuxtLink to="/blog">Blog</NuxtLink>
</nav>
</template>Why: <NuxtLink> adds the class "router-link-active" to the link that matches the current page, so you can style it with plain CSS — no manual comparison needed.
<template>
<NuxtLink to="/blog" class="link">Blog</NuxtLink>
</template>
<style scoped>
/* Applied automatically when /blog is the current route */
.link.router-link-active {
font-weight: bold;
}
</style>Why: useRoute() holds info about the current URL (path, params, query); useRouter() lets you control history (back, forward). Both are auto-imported.
<script setup lang="ts">
const route = useRoute()
const router = useRouter()
// route.path, route.params, route.query.q
// router.back(), router.push('/home')
</script>
<template>
<p>You are on {{ route.path }}</p>
</template>