Vue Router <router-link> 具有自定义属性+插槽模板，不在前端路由（SPA）

Question

我不确定这是否真的重要，但我正在将 Nuxt3/Vue3 与 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 链接元素的

custom

属性和内部 HTML 也“有效”，但在渲染上看起来不正确。

我能够从视觉和路由角度使其工作的唯一方法是将内部

<a>

标签替换为

<router-link>

或

<NuxtLink>

元素，但这会导致一些疯狂的 vuejs 核心错误，如果在

beforeUnmount

生命周期挂钩期间，该组件会因任何原因被卸载。所以这显然不是正确的解决方案。

我错过了什么吗？或者这是一个需要 PrimeVue 组件作者解决的问题？

Answer 1

您可以使用

<RouterLink>

的插槽道具。 （文档）

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