vue路由精确匹配和模糊匹配

Nikki_u

于 2022-03-27 18:03:55 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/Nikki_u/article/details/123777972

本文探讨了Vue Router中链接激活样式的问题，即当使用<router-link>时，如何正确地应用激活状态样式。文章详细解释了router-link-active与router-link-exact-active的区别，并给出了两种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<router-link to="/">one</router-link>
<router-link to="/two">two</router-link>

.router-link-active,
.router-link-exact-active{
  color: red;
  font-size: 60px;
}

出现错误：两个都会添加样式

原因：/* 入口和导航路径相比 */

/* router-link-active模糊匹配类名 */

/* router-link-exact-active精确匹配类名 */

解决办法一、删除类名

解决办法二、添加exact

<router-link exact to="/">one</router-link>//如果出现/必须要写exact
<router-link to="/two">two</router-link>