Nuxt 3命名路由与子路由使用问题：跳转报错及激活样式异常求助

一、首次NuxtLink跳转报错的原因 #

你最初的代码里，NuxtLink的:to用了相对路径posts/${id}，但当前页面是/posts（对应pages/posts/index.vue），相对路径会被解析为/posts/posts/${id}，这和你定义的动态路由/posts/:id（对应pages/posts/[id].vue）完全不匹配。Nuxt找不到对应的路由规则，就会抛出500 Missing required param "id"的错误。

正确的跳转方式有三种：

• 绝对路径：:to="/posts/${id}"
• 正确相对路径：:to="./${id}"
• 命名路由跳转（更规范）：

  <NuxtLink :to="{ name: 'posts-id', params: { id } }">go</NuxtLink>
  

Nuxt会根据pages目录自动生成命名路由，pages/posts/[id].vue对应的命名路由就是posts-id，用这种方式跳转不会出现路径解析错误。

二、解决激活样式同时生效的问题 #

导航栏的/posts链接和页面内的go链接同时被添加激活样式，是因为useActiveClass默认采用包含匹配规则：只要当前路径是链接路径的子路径，就会标记为激活。比如当前在/posts/3，/posts是它的父路径，所以导航栏的/posts链接会被激活；而go链接指向/posts/3，是精确匹配，也会被激活。

针对导航栏的解决方法 #

让导航栏的/posts仅在精确匹配时激活，给它添加exact-active-class属性：

<NuxtLink to="/posts" exact-active-class="active">posts</NuxtLink>

这样只有当当前路径完全等于/posts时，导航栏的posts链接才会显示激活样式，进入/posts/3时就不会被激活了。

针对页面内go链接的解决方法 #

如果希望页面内的go链接仅在当前路径完全匹配时激活，可以手动通过useRoute判断：

<script setup>
const id = ref('')
const route = useRoute()
const isActive = computed(() => route.path === `/posts/${id.value}`)
</script>

<template>
  <input type="text" v-model="id"><br>
  <NuxtLink :to="`/posts/${id}`" :class="{ active: isActive }">go</NuxtLink>
</template>

补充：Nuxt命名路由的工作机制 #

Nuxt会自动根据pages目录结构生成命名路由，核心规则：

• 根目录文件：pages/index.vue对应index，pages/about.vue对应about
• 子目录文件：pages/posts/index.vue对应posts，pages/posts/[id].vue对应posts-id（动态参数部分用-连接）
• 嵌套动态路由：pages/posts/[postId]/comments/[commentId].vue对应posts-postId-comments-commentId

使用命名路由跳转时，必须通过params传递动态参数，比如跳转到posts-id路由需要传id参数，这种方式比路径字符串更可靠，路径结构变化时无需修改所有跳转链接。

内容的提问来源于stack exchange，提问作者arifcelik