如何让Vue3/Vuetify3页面渲染效果与Vue2/Vuetify2保持一致

你在Vue2/Vuetify2环境下运行代码时，链接都是黑色、图标样式统一，但切换到Vue3/Vuetify3后，“Informativa Privacy”变成红色、“Entra nel sito libero”变成蓝色，图标按钮的背景样式也不一样了，试了直接给router-link加color属性没效果，不知道怎么调整对吧？别着急，我来帮你一步步解决这两个问题：

一、统一链接颜色为黑色 #

Vuetify3的全局默认样式和Vue2版本有明显差异，router-link和原生a标签的默认颜色被内置样式覆盖了，你可以通过以下方式调整：

1. 全局样式统一（全站生效，推荐） #

在你的全局CSS文件（比如App.vue的<style>标签，或者项目根目录的全局css文件）中添加以下代码：

/* 统一所有router-link和原生a标签的颜色为黑色 */
.router-link-active,
.router-link-exact-active,
a {
  color: #000 !important;
  /* 可选：如果不需要链接下划线，加上这行 */
  text-decoration: none;
}

2. 单个链接单独设置（仅修改指定链接） #

如果只想调整当前组件里的这两个链接，也可以给它们单独加自定义类或内联样式：

• 给router-link加自定义类：

<router-link  
  :to="'/privacy_information'"
  class="black-link"
>
  Informativa Privacy
</router-link>

然后在当前组件的<style>标签中定义类样式：

.black-link {
  color: black !important;
}

• 或者直接用内联样式：

<router-link  
  :to="'/privacy_information'"
  style="color: black;"
>
  Informativa Privacy
</router-link>

小提示：为什么直接给router-link加color属性没用？因为Vuetify3中的router-link是经过组件封装的，原生HTML的color属性对它不生效，必须通过CSS样式来覆盖默认的主题样式~

二、恢复图标按钮的透明背景样式 #

你看到的图标差异是因为Vuetify3的v-btn组件默认样式逻辑变更了，虽然tile属性还保留，但默认背景色的处理不同。只需要给每个图标按钮加上variant="text"属性，就能让按钮变成纯图标样式，背景透明，和Vue2/Vuetify2的效果一致：

修改后的按钮代码示例：

<v-btn
  href="https://twitter.com/liberoGroupIT"
  target="_blank"
  class="ma-2"
  tile
  large
  color="#1DA1F2"
  icon
  variant="text" <!-- 新增这个属性 -->
>
  <v-icon>mdi-twitter</v-icon>
</v-btn>

variant="text"会移除按钮的默认背景色，只保留图标和指定的文字/图标颜色，完美还原你需要的透明图标效果。

按照上面的方法调整后，链接颜色会统一为黑色，图标按钮也会恢复透明背景的样式，和Vue2/Vuetify2中的渲染效果就完全一致啦！

备注：内容来源于stack exchange，提问作者fraaanz