vue按钮高亮，添加类，点击高亮，路由router高亮linkExactActiveClass（多种方法实现）...

vue样式高亮

使用vue/cli3脚手架创建一个有router路由的项目,并且运行该项目

vue create 'project-name'
cnpm i
cnpm run serve

清理App.vue的内容，在新建page文件夹并新建响应的组件，配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from '../page/Home.vue'
import Setting from '../page/Setting.vue'
import User from '../page/User.vue'

export default new VueRouter({
routes:[
{path:'/',redirect:'/home'},
{path:'/home',component:Home},
{path:'/setting',component:Setting},
{path:'/user',component:User},
]
})

App.vue

<template>
<div id="app">
<router-link to="/home">去到home页面</router-link>
<router-link to="/user">去到user页面</router-link>
<router-link to="/setting">去到setting页面</router-link>
<router-view></router-view>
</div>
</template>

<script>
export default {

};
</script>

<style>
#app{
color: #fff;
background: hotpink;
}
a{
text-decoration: none;
color:  #fff;
margin-right: 20px;
}
a.active{
background: #fff;
color: hotpink;
}
</style>

router-link解析成的是

<a></a>

tag="li"

路由高亮

active-class

1. 使用类名

   ,router-link-active

   或则

   router-link-exact-active

   
   我们渲染完界面观察可知，vue会产生该路由两个类名:router-link-active和router-link-exact-active

• router-link-active:设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选linkActiveClass 来全局配置
• router-link-exact-active:配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的

1. 我们直接在style匹配使用该类名匹配我们想要的样式即可

.router-link-active{
color: green;
}

1. 部分情况需要使用exact来开启router-link严格模式

<!-- 此时，当点击该链接时，/user同样也会匹配到router-link-
3ff7
active -->
<router-link to="/user/a">去到user子页面</router-link>

<router-link to="/user" exact>去到user页面</router-link>

1. 当然可以直接使用.router-link-exact-active精确匹配,这样就不需要使用exact了

.router-link-exact-active{
color: blue;
}
/* .router-link-active{
color: green;
} */

1. 我们添加返回按钮同样也会高亮(当有历史记录，点击返回上个按钮依旧会高亮)

<button @click.once="$router.back()">返回</button>

1. 去掉历史记录，可以使用replace，在页面不会留下历史标签，可能在部分高亮不需要

<router-link to="/user/a" replace>去到user子页面</router-link>

router-link-active、linkExactActiveClass

router-link-active:全局配置 的默认“激活 class 类名”
linkExactActiveClass：全局配置 精确激活的默认的 class
在上面App.vue已经写了active的样式了，我们介绍其中的用法：需要到router文件里面的路由规则匹配

export default new VueRouter({
routes:[
...
...
],
linkExactActiveClass:'active'
})

其它方式实现高亮

我们有时候不需要路由，或则不想要路由，可能路由也实现不了,或则不加router-link，或则单纯的实现高亮…

根据路径实现（在做tabbar底部导航栏时比较适用）

<template>
<div id="app">
<ul>
<li @click="goTo('/home')">home</li>
<li @click="goTo('/user')">user</li>
<li @click="goTo('setting')">setting</li>
</ul>
<!-- <router-view></router-view> -->
</div>
</template>
<script>
export default {
methods:{
goTo(url){
this.$router.push(url)
}
}
};
</script>
<style>
......
/* 这是提供li高亮的 */
li.active{
color: green;
}
</style>

我们点击哪一个vue都不会为我们提供一个类

这里涉及两个主要的知识点:(1)我们可以传给 v-bind:class 一个对象，以动态地切换 class(2)$route.path获取地址栏的路径

1. 两种方法：在template来使用class对象语法来实现:当点击的路径和路由路径一样时则添加该类

<li @click="goTo('/home')" :class="{active:'/home'===$route.path}">home</li>
<li @click="goTo('/user')" :class="{active:'/user'===$route.path}">user</li>
<li @click="goTo('setting')" :class="{active:'/setting'===$route.path}">setting</li>

1. 如果标签较多的话，可以使用v-for进行渲染；然后在methods使用方法直接判断

methods:{
goTo(url){
this.$router.push(url)
if(this.$route.path==url){

}
}
}

利用data（在做滚动导航栏比较适合，或则后台有提供数据）

<template>
<div id="app">
<ul>
<li v-for="item in list" :key="item.id" :class="{active:item.id==type}" @click="addActive(item.id)">{{item.value}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
list:[
{id:1,value:'home'},
{id:2,value:'user'},
{id:3,value:'setting'}
],
type:1
}
},
methods:{
addActive(){

}
}
};
</script>

根据以上情况很明显了；就是通过点击改变data数据里面的type。这是模拟的数据，在实际过程中使用的数据各不相同，需要我们在添加想要的数据

addActive(id){
this.type = id  //改变type跟id一样，即可添加类
}

利用meta

这种方法和上面两种思路基本一致，没多大区别，而且要涉及到路由，看看即可

{path:'/home',component:Home,meta:{mypath:'/home'}},
{path:'/setting',component:Setting,meta:{mypath:'/setting'}},
{path:'/user',component:User,meta:{mypath:'/user'}},

这里就不深究了

直接用JS操作（比较难以实现的高亮再来使用）

Vue其实不建议我们用dom或则bom操作，所以最好用Vue提供给我们的，我们使用refs来绑定属性

<template>
<div id="app">
<ul ref="ulCon">
<li v-for="item in list">{{item.value}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
list:[
{id:1,value:'home'},
{id:2,value:'user'},
{id:3,value:'setting'}
]
}
},
methods:{
},
mounted(){
let ul = this.$refs.ulCon
let list = ul.children
list[0].classList.add('active')
ul.addEventListener('click', ($event)=>{
for(var i = 0;i<list.length;i++){
list[i].classList.remove('active')
}
$event.target.classList.add('active')
})
}
};
</script>

顺便一题，可能绑定router-link实现高亮，那么解决router-link点击事件

<router-link tag="li" :to="'/'+item.value" v-for="item in list" :key="item.id"  @click.native="addActive()">{{item.value}}</router-link>

.native:直接监听一个原生事件,加个native 就是告诉vue 这个标签现在有主了 它是H5标签可以加事件了.;router-link 其实就是一个封装好的 .vue 组件，所以需要 加.native修饰符才能绑定事件

总结

1. 可能有些地方使用router-link，有些绑定方式实现路由跳转，有些地方只是简简单单的实现高亮，我们则选择合适我们的方法
2. 上面有些方法也适用于多种情况，活学活用即可
3. 后续如果想到其他方法，会继续更；如果有什么错误，会改正
4. 使用watch或则computed或则指令等等，和上面的思路和方法都是大同小异
5. 其实基本是实现要添加一个类