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"(这样是解析成li标签)解析成自己想要的标签

路由高亮

active-class

1. 使用类名,router-link-active或则router-l