使router-link失效

引用中给出了一种使用`router-link`的示例代码以及相应的样式设置。这段代码中的`router-link`标签用于跳转到不同的路由，并通过在`router-link`标签内部添加`span`标签来改变文字的样式。此外，通过在样式中指定`.active span`的颜色属性，可以改变被激活的链接的文字颜色。

引用提供了另一种给`router-link`添加样式的方式，即使用`exact-active-class`属性。可以在`router-link`标签内部添加`exact-active-class`属性，并设置对应的样式类名，实现激活链接的样式改变。

然而，引用中指出在Vue3中使用`exact-active-class`属性已经失效，因为Vue3的`router-link`样式设置方式发生了改变。在Vue3中，可以使用`router-link`的`active-class`和`exact`属性来设置链接的激活样式。根据路由路径是否精确匹配来设置CSS类名。

所以，要使`router-link`失效，你可以通过更改路由的路径或者在`router-link`标签中添加`exact`属性来实现。具体的代码和样式设置根据你的需求而定。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* *3* [技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效](https://blog.csdn.net/yangyangdt/article/details/122324830)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]