厦门思明区建设局网站,客户提出网站建设申请,医院如何做网站策划,久产久人力有限公司声明式导航-导航链接 文章目录 声明式导航-导航链接router-link的两大特点#xff08;能跳转、能高亮#xff09;声明式导航-两个类名定制两个高亮类名 实现导航高亮#xff0c;实现方式其实#xff0c;css#xff0c;JavaScript , Vue ,都可以实现。其实关于路由导航能跳转、能高亮声明式导航-两个类名定制两个高亮类名 实现导航高亮实现方式其实cssJavaScript , Vue ,都可以实现。其实关于路由导航我么可以使用vue-router提供的一个全局组件 router-link来取代a标签去实现。 router-link的两大特点能跳转、能高亮
① router-link 可以跳转通过配置 to 属性指定路径。其实本质上还是 a 标签省略#
router-link to/find发现音乐/router-link
//上面的等价于下面的
a href#/find发现音乐/a 渲染后是否等于a标签呢我们检查元素发现就可以证明 ② router-link 可以实现高亮默认就会高亮类名可以直接设置高亮的样式
当我们点击了任意一个导航我们都会渲染给router-link组件标签自动的添加类和属性。而其他的则移除 classrouter-link-exact-active router-link-active 此时我们给我们的router-link组件标签添加一个类名即可
.footer_wrap a.router-link-active {background-color: hotpink;
}注意写法是a.router-link-active通过a.的方式后面加上提供的类名 声明式导航-两个类名 通过上面的两大特点的使用有没有发现一个问题呢
就是我们在设置高亮的时候router-link自动添加了两个类名两个高亮的类名。 ①router-link-active 模糊匹配
路径后面的都可以匹配到例如to/my /my/a /my/b 都可以已进行匹配的
②router-link-exact-active 精确匹配
路径后面的都不会生效只会生效当前路径
例如to/my 仅可以匹配/my
模糊匹配用的是最多的哈 定制两个高亮类名 由于两个类名太长了我们对它进行个性化定制。
方法 在配置路由规则的配置项中添加两个属性 linkActiveClass: ‘类名’linkExactActiveClass ‘类名’ 详细的步骤
第一步 第二步 在经过上面的处理后我们可以看到浏览器中渲染出来的类名就是我们定制后的类名了
