NuxtLink 的基础用法与核心特性
基本用法
在 Nuxt.js 项目中，NuxtLink 替代了传统的 a 标签，提供了与页面路由系统高度耦合的导航能力，实现了页面间的无刷新跳转并且会在用户悬停时预加载目标页面的数据，提升初次渲染速度。
使用场景包括导航栏、侧边菜单和站点脚点等，特别是当目标页面较大或数据量较多时，预取机制可以显著降低用户感知的等待时间。
<NuxtLink to="/">首页</NuxtLink>
# Nuxt 3 的写法，页面跳转
活跃状态与预取配置
为提高用户体验，可以通过配置 active-class/ exact-active-class 来为当前页面的导航项提供可视化反馈，此外 预取行为 也可以在全局或单个链接级别进行控制。
在模板中可以这样实现：活跃状态指示与 路由前置预取，使得用户对当前位置和可跳转页面有清晰感知。
<nuxt-link to="/about" active-class="is-active" exact-active-class="is-exact-active">关于我们</nuxt-link>
页面与组件的连接：传参与动态路由
to 对象与命名路由
通过 to 属性传递一个对象，不仅能指定路径，还能携带 路由名称、params、query，从而实现对同一组件的多种入口与参数组合。
这种方式尤其在大型应用中有优势，因为它避免了硬编码路径，提高了可维护性与可读性。
<NuxtLink :to="{ name: 'product', params: { id: 42 }, query: { ref: 'homepage' }}">产品详情</NuxtLink>
动态路由与参数传递
配合页面文件名的动态段，例如 pages/product/_id.vue，可以通过 params 获取到 动态参数 id，并在页面生命周期中利用 useRoute/useAsyncData 读取数据。
将参数绑定到导航上，确保导航行为与路由解析一致，从而实现无刷新加载的体验。
// 入口模板
<NuxtLink :to="{ name: 'product-id', params: { id: 123 } }">查看商品</NuxtLink>// 页面脚本中读取参数
<script setup>
import { useRoute } from '#app'
const route = useRoute()
const id = route.params.id
</script>
路由优化要点：预取、懒加载与路由规则
预取与懒加载的实战要点
Nuxt 的路由系统会在 链接悬停/可见时触发预取，这对提高交互的响应速度至关重要；同时通过 代码分割 和 懒加载页面，可以把初始包体积降到合理水平。
要点包括合理控制 routeRules、对低优先级页面设定延迟加载，以及在关键路径上优先加载核心页面。
// Nuxt 3 路由规则示例
export default defineNuxtConfig({routeRules: {'/admin/**': { ssr: true, prefetch: true },'/login': { prefetch: false }}
})
路由规则与页面加载策略
通过设置 routeRules，可以为特定路径定义加载策略、服务端渲染开关和 prefetch 行为，这对 SEO 和首次渲染时间有直接影响。
此外，借助 中间件，可以在导航前对路由进行访问控制，确保 导航的安全性与一致性。
// 中间件示例
export default defineNuxtRouteMiddleware((to, from) => {if (to.meta.requiresAuth && !isLoggedIn()) {return navigateTo('/login')}
})
布局配置要点：全局默认布局与多布局
全局布局与自定义布局
在 Nuxt 项目中，布局决定了页面的上部导航、尾部以及通用结构；通过在 app/layouts 下创建默认布局，可以统一外观，而 多布局则支持按页面切换不同的结构。
建议在关键入口页面使用一致布局以维持用户体验，同时为管理后台等区域准备专属布局，以实现功能与风格的分离。
// app/layouts/default.vue
<template><div><Header /><main><NuxtPage /></main><Footer /></div>
</template>
按页选择布局的实现
在 Nuxt 3 中，可以通过 definePageMeta 指定页面的布局，如 layout: 'admin'，实现不同路由的自定义结构。
结合 布局文件，可以在同一个应用中实现优雅的分模版设计，同时保持代码的清晰与可维护。
// pages/admin.vue
<script setup>
definePageMeta({ layout: 'admin' })
</script>
综合示例：从链接点击到页面渲染的完整流程
构建一个小型产品导航
通过 NuxtLink，用户在导航栏点击产品列表或详情页时，会触发 路由变化，页面进入渲染流程，数据就绪后渲染，提升体验。
页面结构的设计应将导航、内容区域和布局分离，确保 可复用的组件与路由之间的耦合度保持较低。
页面数据获取与渲染流程
在目标页面中，通常会使用 useFetch/useAsyncData 来获取数据，并在数据就绪前显示占位内容，确保 首屏加载稳定。
数据获取与路由迁移之间的协作，是实现高性能导航体验的核心。通过 组件化、代码分割，以及 路由元信息，可以实现灵活的布局与数据呈现。
// product/[id].vue
<script setup>
import { useRoute, useFetch } from '#imports'
const route = useRoute()
const { data: product } = await useFetch(`/api/products/${route.params.id}`)
</script>
