Nuxt3/Vue3中PrimeVue Menubar自定义<router-link>无法SPA路由问题

在Nuxt3/Vue3结合PrimeVue开发时，给Menubar组件的#item插槽自定义router-link实现路由跳转，遇到了SPA路由失效的问题：

问题现象 #

初始代码如下：

<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>组件，问题依旧；
• 移除内部<a>标签，路由跳转正常，但Menubar渲染样式异常；
• 移除custom属性及内部自定义HTML，路由正常但视觉样式错误；
• 嵌套<router-link>/<NuxtLink>，视觉和路由正常，但组件卸载时触发Vue核心错误。

最终解决方法 #

在<a>标签上添加@click="routerProps.navigate"，手动触发router-link的导航方法，即可避免页面重建问题。最终可用代码：

<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>

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