BillBie

导航

vue-router4 中router-link,tag(v3)相关应用

在vue-router 3.x中,router-link标签中会被渲染为a标签,实际应用中,有可能需要将a标签改为其它标签

可以使用tag="button"这种方式,

但是在vue-router 4.x中,移除了tag,为了实现这样的效果,

    <router-link to="/home" custom v-slot="{ isActive,isExactActive,navigate }">
      <button  @click="navigate" :class="{'router-link-active':isActive}">首页</button>
    </router-link>

 官方文档;

https://router.vuejs.org/guide/migration/#removal-of-append-prop-in-router-link

https://router.vuejs.org/api/#router-link-s-v-slot

 

其中如果需要 将a标签去掉,则需要加上custon属性

官方文档:https://router.vuejs.org/api/#custom

posted on 2022-05-05 15:32  BillBie  阅读(301)  评论(0编辑  收藏  举报