如何在路由链接Vuejs中添加类和图标答案

【问题标题】：how to add class and icon in route link Vuejs如何在路由链接Vuejs中添加类和图标
【发布时间】：2021-09-14 05:32:06
【问题描述】：

我有一个路由链接 vuejs：

<router-link :to="{ name: 'user', params: { user: 123 }}">view</router-link>

我想在该路由链接中添加类：class="btn btn-primary" 和 icon。请给我一些想法。谢谢

【问题讨论】：

您是否使用任何 UI 库，例如 vuetify 或 bootstrap-vue？

标签： vue.js vuejs-routing

【解决方案1】：

您可以将 tag 属性添加为 button 作为值，并将您的图标添加到路由器链接文本旁边：

<router-link tag="button" class="btn btn-primary" :to="{ name: 'user', params: { user: 123 }}">
  <icon name="someName"/>   
   view
</router-link>

【讨论】：

【解决方案2】：

Vue-router 的路由器链接只需添加一个匹配链接的 a-href 链接并添加一些路由器精确类，这样您就可以将类添加到路由器链接，它会起作用。和里面的html一样。
<router-link class="btn btn-primary" :to="{ name: 'user', params: { user: 123 }}"><i class="mdi mdi-heart"></i>view</router-link>

【讨论】：