antd for vue ＜router-link＞的使用

爱读书的小杰鸟

已于 2022-02-16 18:00:58 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 ant

于 2022-02-16 15:15:51 首次发布

本文链接：https://blog.csdn.net/Jaunty_Liu/article/details/122964193

本文介绍了在Ant Design Vue (Antdv) 框架中如何与Vue Router 3.1x及以上版本配合使用，确保路由链接被正确渲染为特定元素。针对Vue Router的版本差异，提供了在模板中将`<router-link>`渲染为`<span>`的解决方案，并展示了如何在`<a-menu-item>`中实现点击跳转到特定路径的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd for vue 的使用

问题

比如antdv模板中有：

<span>1</span>

如果使用<router-link>最后会被渲染成<a>，然后格式会发生变化

解决：

vue-routerv3.1x之前：

<router-link to='/home' tag='span'>

最后会被渲染成<span>

vue-routerv3.1x之后：

<router-link to="/home/users" custom v-slot="{ navigate }">
  <span @click="navigate" @keypress.enter="navigate" role="link">用户管理</span>
</router-link>

这样才会被渲染成<span>同时点击跳转

实例：

原本模板中是：

<a-menu-item key="2">
  <wallet-outlined />
  <span>2</span>
</a-menu-item>

改成跳转到/home：

<router-link to="/home" custom v-slot="{ navigate }">
  <a-menu-item key="2" @click="navigate" @keypress.enter="navigate" role="link">
    <user-outlined />
      <span>2</span>
  </a-menu-item>
</router-link>