基础篇一 Nuxt4路由详解：动态路由与路由参数

文章目录一、动态路由基础二、多个动态参数三、可选动态参数四、Catch-all 路由五、路由参数类型校验六、获取路由信息七、路由元信息八、监听路由变化九、编程式导航十、生成动态路由链接十一、路由配置查看总结上一篇文章我们学会了路由自动生成的基础用法今天深入聊聊动态路由。实际项目中动态路由用得非常多——文章详情、用户主页、商品页面……都是动态路由的典型场景。一、动态路由基础动态路由用方括号[参数名]定义。创建pages/article/[id].vuescript setup langts const route useRoute() const articleId route.params.id console.log(文章ID:, articleId) // 字符串类型 /script template div h1文章详情/h1 p文章ID: {{ articleId }}/p /div /template访问/article/123id就是123。⚠️ 注意route.params中的值都是字符串类型即使 URL 中是数字。二、多个动态参数有时候需要多个参数比如/article/123-my-title!-- pages/article/[id]-[slug].vue -- script setup langts const route useRoute() const { id, slug } route.params console.log(ID:, id) // 123 console.log(Slug:, slug) // my-title /scriptURL 格式是id-slug用-分隔。三、可选动态参数有些参数是可选的用双方括号[[参数名]]!-- pages/articles/[[page]].vue -- script setup langts const route useRoute() const page route.params.page || 1 // 默认第1页 /script template div h1文章列表 - 第 {{ page }} 页/h1 /div /template这个路由能匹配/articles→ page 为 undefined/articles/2→ page 为 “2”四、Catch-all 路由匹配多层路径用[...slug]!-- pages/docs/[...slug].vue -- script setup langts const route useRoute() const slug route.params.slug // 是一个数组 /script template div p路径: {{ slug.join(/) }}/p /div /template访问/docs/guide/getting-startedslug就是[guide, getting-started]。五、路由参数类型校验Nuxt 支持在definePageMeta中校验参数script setup langts definePageMeta({ validate: async (route) { // 校验 id 是否为数字 return /^\d$/.test(route.params.id as string) } }) /script校验失败会跳转到 404 页面。更完整的例子script setup langts definePageMeta({ validate: async (route) { const id route.params.id as string const slug route.params.slug as string // id 必须是数字 if (!/^\d$/.test(id)) { return false } // slug 必须是有效的 URL slug if (slug !/^[a-z0-9-]$/.test(slug)) { return false } return true } }) /script六、获取路由信息useRoute()返回完整的路由信息script setup langts const route useRoute() console.log(路径:, route.path) // /article/123 console.log(参数:, route.params) // { id: 123 } console.log(查询参数:, route.query) // { page: 1 } console.log(完整URL:, route.fullPath) // /article/123?page1 console.log(路由名称:, route.name) // article-id console.log(元信息:, route.meta) // 自定义 meta /script七、路由元信息在页面中定义 meta然后在中间件或其他地方使用script setup langts definePageMeta({ meta: { requiresAuth: true, title: 文章详情 } }) /script在中间件中使用// middleware/auth.tsexportdefaultdefineNuxtRouteMiddleware((to,from){if(to.meta.requiresAuth){consttokenuseCookie(token)if(!token.value){returnnavigateTo(/login)}}})八、监听路由变化有时候需要响应路由参数变化script setup langts const route useRoute() const articleId computed(() route.params.id) // 方式一watch watch(articleId, async (newId) { console.log(文章ID变了:, newId) // 重新加载数据 }) // 方式二在 useFetch 中监听 const { data } await useFetch(() /api/articles/${articleId.value}) /script九、编程式导航除了NuxtLink还可以用代码导航script setup langts const router useRouter() // 基础导航 const goHome () { navigateTo(/) } // 带参数导航 const goToArticle (id: number) { navigateTo(/article/${id}) } // 带查询参数 const searchArticles (keyword: string) { navigateTo({ path: /search, query: { q: keyword } }) } // 替换历史记录不保留当前页 const replaceToHome () { navigateTo(/, { replace: true }) } // 返回上一页 const goBack () { router.back() } /script十、生成动态路由链接列表页中生成详情页链接script setup langts const articles ref([ { id: 1, title: 文章一, slug: article-one }, { id: 2, title: 文章二, slug: article-two } ]) /script template ul li v-forarticle in articles :keyarticle.id NuxtLink :to/article/${article.id}-${article.slug} {{ article.title }} /NuxtLink /li /ul /template十一、路由配置查看想看项目里生成了哪些路由运行npx nuxi info或者查看构建产物.nuxt/routes.json。总结动态路由核心知识点功能语法必选参数[id]可选参数[[page]]多个参数[id]-[slug]Catch-all[...slug]参数校验definePageMeta({ validate })获取参数useRoute().params编程导航navigateTo()动态路由让 URL 更有意义也更利于 SEO。下一篇聊聊路由守卫学会如何控制页面访问权限。相关文章入门篇三Nuxt4组件自动导入写代码少敲一半字入门篇二Nuxt 4路由自动生成告别手动配置路由的日子延伸阅读nuxt4完整系列持续更新中。。内容有帮助点赞、收藏、关注三连评论区等你