antd for vue <router-link>的使用

1,089 阅读1分钟

# antd for vue <router-link>的使用

问题

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