NUXT3中NuxtLink跳转URL异常问题求助

你遇到的是Nuxt3中NuxtLink路径跳转受URL末尾斜杠影响的问题，本质是浏览器路径解析规则和路由写法的冲突，以下是几种可靠的解决方法：

解决方案1：使用完整绝对路径 #

直接写出包含项目根路径的完整地址，彻底避免相对路径的解析歧义：

<NuxtLink class="list-group-item" :to="`/Eventik/events/edit/${event.eventId}`">{{ $t('edit') }}</NuxtLink>

解决方案2：使用命名路由（推荐） #

这是Nuxt官方推荐的路由跳转方式，完全不受当前URL结构影响，也避免了路径拼接错误：

1. 在编辑页面events/edit/[id].vue中定义路由名称：

<script setup>
definePageMeta({
  name: 'events-edit'
})
</script>

2. 在列表页面通过路由名称跳转：

<NuxtLink class="list-group-item" :to="{ name: 'events-edit', params: { id: event.eventId } }">{{ $t('edit') }}</NuxtLink>

解决方案3：结合baseURL配置（若已设置） #

如果你的nuxt.config.ts中已经配置了app.baseURL: '/Eventik/'，可以使用相对根路径（注意必须用反引号解析变量）：

<NuxtLink class="list-group-item" :to="`/events/edit/${event.eventId}`">{{ $t('edit') }}</NuxtLink>

之前尝试出错的原因 #

• 使用/events/edit/${event.eventId}时，若代码未用反引号包裹模板字符串，变量${event.eventId}不会被解析，导致路径错误；即使解析正确，当URL末尾带斜杠时，浏览器可能误将绝对路径解析为相对路径；
• edit/${event.eventId}是相对当前路径的跳转，无斜杠的/Eventik/events会被解析为/Eventik/edit/1，跳过了events层级；
• /edit/${event.eventId}是从网站根目录开始跳转，直接忽略了/Eventik/events的层级结构。

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