【vue】router-link 第一个默认选中，exact当地址为 / 的时候被激活，点击高亮等问题

1.在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？如何做？在路由里面设置router/index.js此时页面中会激活open 及active属性在谷歌浏览器检查是否加载，在样式添相应样式即可.active{color:red;}但是此时我们发现to=’/’一直高亮举个例子，如果当前的路径是 /a 开头的，那么也会被设置 CSS 类名。按照这...

WANGHUAN-

8974人浏览 · 2019-03-18 12:16:02

WANGHUAN- · 2019-03-18 12:16:02 发布

1.在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？
如何做？
在路由里面设置router/index.js
在这里插入图片描述
此时页面中会激活open 及active属性

在谷歌浏览器检查是否加载，在样式添相应样式即可
.active{
color:red;
}
但是此时我们发现 to=’/’ 一直高亮

举个例子，如果当前的路径是 /a 开头的，那么也会被设置 CSS 类名。
按照这个规则，每个路由都会激活！想要链接使用 “exact 匹配模式”，则使用 exact 属性：
在这里插入图片描述

添加exact 属性后默认路径没有高亮，解决办法如下

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^