我不确定这些是否真的重要，但我正在使用Nuxt 3/Vue 3与PrimeFaces/PrimeVue UI框架，特别是在<Menubar>#item模板插槽中挣扎。
这种情况的要点是，在呈现菜单按钮的模板代码中，我有以下代码：

<router-link v-slot="routerProps" :to="item.route" custom>
    <a :href="routerProps.href" v-bind="props.action">
        <span v-bind="props.icon" />
        <span v-bind="props.label">{{ label }}</span>
    </a>
</router-link>

上面的结果看起来很完美，但是当点击菜单按钮时，浏览器将其视为外部链接，发送指定路由的GET请求，然后从头开始重新构建页面，导致整个应用程序“重新启动”。这显然不是我想要在我的SPA应用程序。
我没有使用任何SSR的东西（如果它重要的话）。
我尝试使用<NuxtLink>而不是<router-link>，并获得相同的行为。
我试过从内部HTML中删除<a>标签（留下<span>标签），就路由而言，这是“有效的”，但是<Menubar>元素没有正确呈现，看起来很糟糕。
删除nuxt/router link元素的custom属性和内部HTML也可以“工作”，但在渲染上看起来不正确。
从视觉和路由的Angular 来看，我能够让它工作的唯一方法是将内部的<a>标记替换为<router-link>或<NuxtLink>元素，但是如果在beforeUnmount生命周期钩子期间由于任何原因卸载该组件，这会导致一些疯狂的vuejs核心错误。所以这显然不是正确的解决方案。
我是不是漏了什么？或者这是一个需要由PrimeVue组件作者解决的问题？
编辑：根据@KaiKai的回答和vue文档，缺少的关键是将@click="routerProps.navigate"添加到<a>标签中。
最终工作代码：

<router-link v-slot="routerProps" :to="item.route" custom>
    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
        <span v-bind="props.icon" />
        <span v-bind="props.label">{{ label }}</span>
    </a>
</router-link>