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

上一篇文章我们学会了路由自动生成的基础用法，今天深入聊聊动态路由。实际项目中，动态路由用得非常多——文章详情、用户主页、商品页面……都是动态路由的典型场景。

一、动态路由基础

动态路由用方括号[参数名]定义。创建pages/article/[id].vue：

<script setup lang="ts"> const route = useRoute() const articleId = route.params.id console.log('文章ID:', articleId) // 字符串类型 </script> <template> <div> <h1>文章详情</h1> <p>文章ID: {{ articleId }}</p> </div> </template>

访问/article/123，id就是"123"。

⚠️ 注意：route.params中的值都是字符串类型，即使 URL 中是数字。

二、多个动态参数

有时候需要多个参数，比如/article/123-my-title：

<!-- pages/article/[id]-[slug].vue --> <script setup lang="ts"> const route = useRoute() const { id, slug } = route.params console.log('ID:', id) // "123" console.log('Slug:', slug) // "my-title" </script>

URL 格式是id-slug，用-分隔。

三、可选动态参数

有些参数是可选的，用双方括号[[参数名]]：

<!-- pages/articles/[[page]].vue --> <script setup lang="ts"> 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 lang="ts"> const route = useRoute() const slug = route.params.slug // 是一个数组！ </script> <template> <div> <p>路径: {{ slug.join('/') }}</p> </div> </template>

访问/docs/guide/getting-started，slug就是['guide', 'getting-started']。

五、路由参数类型校验

Nuxt 支持在definePageMeta中校验参数：

<script setup lang="ts"> definePageMeta({ validate: async (route) => { // 校验 id 是否为数字 return /^\d+$/.test(route.params.id as string) } }) </script>

校验失败会跳转到 404 页面。

更完整的例子：

<script setup lang="ts"> 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 lang="ts"> 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?page=1 console.log('路由名称:', route.name) // article-id console.log('元信息:', route.meta) // 自定义 meta </script>

七、路由元信息

在页面中定义 meta，然后在中间件或其他地方使用：

<script setup lang="ts"> definePageMeta({ meta: { requiresAuth: true, title: '文章详情' } }) </script>

在中间件中使用：

// middleware/auth.tsexportdefaultdefineNuxtRouteMiddleware((to,from)=>{if(to.meta.requiresAuth){consttoken=useCookie('token')if(!token.value){returnnavigateTo('/login')}}})

八、监听路由变化

有时候需要响应路由参数变化：

<script setup lang="ts"> 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 lang="ts"> 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 lang="ts"> const articles = ref([ { id: 1, title: '文章一', slug: 'article-one' }, { id: 2, title: '文章二', slug: 'article-two' } ]) </script> <template> <ul> <li v-for="article in articles" :key="article.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完整系列，持续更新中。。

---

内容有帮助？点赞、收藏、关注三连！评论区等你 💪