vue3 router-link 和 a标签 hover效果不一致

理解：router-link

是 Vue Router 提供的组件，用于在 Vue.js 应用程序中进行路由导航。它在底层是通过 JavaScript 实现的，并且不直接映射到

<a>

标签。

在使用router-link的时候，设置的：

<span style="color:#dcc6e0">a</span>:hover {
<span style="color:#ffd700">text-decoration</span>: none;
}

并不能生效，需要另外设置class:

例如：

<span style="color:#ffa07a">.no-hover-underline</span>,
<span style="color:#ffa07a">.no-hover-underline</span>:hover {
<span style="color:#ffd700">text-decoration</span>: none;
}

然后使用：

<router-link to="/" class="no-hover-underline">Home</router-link>

或者：

<router-link :to="route" :class="{ 'no-hover-underline': true }">Link</router-link>