十个router-link如何设置悬停变红

要实现鼠标悬停时router-link变红的效果你可以使用Vue的动态绑定class方式来实现。具体步骤如下：

1. 在你的Vue组件中，为每个-link添加一个class，用于控制样式的变化例如，你可以每个router-link添加一个名为"hover-red"的class。

. 在你的组件的样式中，定义.hover-red类的样式，设置为红色。例如：

.hover-red {
  color: red;
}

3. 使用Vue的动态绑定class的方式，根据鼠标悬停的状态来切换class。在每个router-link上添加一个@mouseover和@mouseout事件监听器，分别用于处理鼠标悬停和离开的事件。例如：

<router-link to="/" class="hover-red" @mouseover="hoverRed = true" @mouseout="hoverRed = false">Home</router-link>

4. 在你的Vue组件的data中定义一个名为hoverRed的变量，并将其初始值设置为false。例如：

data() {
  return {
    hoverRed: false
  }
}

5. 在每个router-link的class属性中使用三元表达式，根据hoverRed的值来动态绑定class。例如：

<router-link to="/" :class="hoverRed ? 'hover-red' : ''" @mouseover="hoverRed = true" @mouseout="hoverRed = false">Home</router-link>

这样，当鼠标悬停在router-link上时，它的颜色就会变为红色。

希望以上解决方案能够帮助到你！如果你有任何疑问，请随时提问。