Nuxt3中NuxtLink的:to属性引发路由重复问题求助

问题原因 #

核心在于相对路径与绝对路径的解析逻辑差异：
当你用:to="category/${slug}/"时，这个路径属于相对路径，Nuxt会基于当前页面的URL进行拼接。比如当前页面已经处于/category/xxx/路径下，点击NuxtLink后就会在现有路径后追加category/${slug}/，最终导致路径叠加重复。而使用普通to属性时，你大概率写的是带开头斜杠的绝对路径（比如to="/category/xxx/"），Nuxt会直接从根路径解析，所以不会出现叠加问题。

解决办法 #

方法一：改用绝对路径 #

给动态拼接的路径加上开头的斜杠，让Nuxt从根路径开始解析：

<NuxtLink :to="`/category/${slug}/`">分类入口</NuxtLink>

方法二：通过路由名称跳转（更稳妥） #

先确认你的动态路由文件结构是pages/category/[slug].vue，对应的路由名称可通过nuxi analyze命令查看（一般为category-slug），然后通过路由名称和参数跳转，彻底避免路径拼接错误：

<NuxtLink :to="{ name: 'category-slug', params: { slug } }">分类入口</NuxtLink>

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