395 vue的 router-link-exact-active，router-link-active，入口导航菜单高亮处理案例
- 点击导航 => 元素里添加了两个类
<a href="#/one" class="router-link-exact-active router-link-active">One</a>
<a href="#/two" class="">Two</a>
- 修改方式1 ： 直接修改类的样式
.router-link-exact-active，
.router-link-active {
color： red;
font-size： 50px;
}
- 修改方式2 ： 使用存在过的类样式 => 修改默认高亮类名
const router = new VueRouter({
routes： []，
// 修改默认高亮的a标签的类名
// red 是已经存在过的
linkActiveClass： 'red'
})
03-高亮状态.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* 假如说路由是后面加进来的, 但是如果之前就已经有了一个类 */
.red {
color: red;
font-size: 50px;
}
/*
.router-link-exact-active,
.router-link-active {
color: red;
font-size: 50px;
}
*/
</style>
</head>
<body>
<div id="app">
<!-- 1. 入口 -->
<router-link to="/one">one</router-link>
<router-link to="/two">two</router-link>
<!-- 4. 出口 -->
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 3. 组件
const One = {
template: `<div>one组件</div>`
}
const Two = {
template: `<div>two组件</div>`
}
// 实例化
const router = new VueRouter({
// 2. 规则
routes: [{
path: '/one',
component: One
}, {
path: '/two',
component: Two
}],
// router-link-exact-active 【去掉router-，改为小驼峰，最后加上Class。】
linkExactActiveClass: 'red'
})
const vm = new Vue({
router,
el: '#app',
data: {}
})
</script>
</body>
</html>
04-高亮状态-精确匹配和模糊匹配.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* 假如说路由是后面加进来的 ,但是如果之前就已经有了一个类 */
/* .red {
color: red;
font-size: 50px;
} */
.router-link-exact-active,
.router-link-active {
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<!--
1. 精确匹配 和 模糊匹配 (了解)
2. router-link-exact-active： 精确匹配 当url上的路径 == href的值
3. router-link-active ： 模糊匹配 当url上的路径 (包含)>= href的值
-->
<div id="app">
<!-- 1. 入口 -->
<!-- exact：加上表示只允许精确匹配，不允许模糊匹配 -->
<router-link to="/" exact>one</router-link>
<router-link to="/two">two</router-link>
<!-- 4. 出口 -->
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 3. 组件
const One = {
template: `<div>one组件</div>`
}
const Two = {
template: `<div>two组件</div>`
}
// 实例化
const router = new VueRouter({
// 2. 规则
routes: [{
path: '/',
component: One
}, {
path: '/two',
component: Two
}]
// router-link-exact-active
// linkExactActiveClass: 'red'
})
const vm = new Vue({
router,
el: '#app',
data: {}
})
</script>
</body>
</html>
