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

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

前端薛之谦… 2019-03-17 20:36:40 1981 收藏 1
分类专栏： vue
版权
vue样式高亮
使用vue/cli3脚手架创建一个有router路由的项目,并且运行该项目

vue create ‘project-name’
cnpm i
cnpm run serve
1
2
3
清理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},
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
App.vue

去到home页面 去到user页面 去到setting页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

router-link解析成的是标签，可以根据自己的需求使用tag=“li”(这样是解析成li标签)解析成自己想要的标签

路由高亮
active-class
使用类名,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 进行全局配置的
我们直接在style匹配使用该类名匹配我们想要的样式即可
.router-link-active{
color: green;
}
1
2
3
部分情况需要使用exact来开启router-link严格模式

去到user子页面
1
2
去到user页面
1
当然可以直接使用.router-link-exact-active精确匹配,这样就不需要使用exact了
.router-link-exact-active{
color: blue;
}
/* .router-link-active{
color: green;
} */
1
2
3
4
5
6
我们添加返回按钮同样也会高亮(当有历史记录，点击返回上个按钮依旧会高亮)
<button @click.once="$router.back()">返回
1
去掉历史记录，可以使用replace，在页面不会留下历史标签，可能在部分高亮不需要
去到user子页面
1
router-link-active、linkExactActiveClass
router-link-active:全局配置 的默认“激活 class 类名”
linkExactActiveClass：全局配置 精确激活的默认的 class
在上面App.vue已经写了active的样式了，我们介绍其中的用法：需要到router文件里面的路由规则匹配

export default new VueRouter({
routes:[
…
…
],
linkExactActiveClass:‘active’
})
1
2
3
4
5
6
7

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

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

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

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

}
1
2
3
4
5
6
7
8
利用data（在做滚动导航栏比较适合，或则后台有提供数据）

}
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
根据以上情况很明显了；就是通过点击改变data数据里面的type。这是模拟的数据，在实际过程中使用的数据各不相同，需要我们在添加想要的数据

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

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

{path:’/home’,component:Home,meta:{mypath:’/home’}},
{path:’/setting’,component:Setting,meta:{mypath:’/setting’}},
{path:’/user’,component:User,meta:{mypath:’/user’}},
1
2
3
这里就不深究了

直接用JS操作（比较难以实现的高亮再来使用）
Vue其实不建议我们用dom或则bom操作，所以最好用Vue提供给我们的，我们使用refs来绑定属性

• {{item.value}}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 顺便一题，可能绑定router-link实现高亮，那么解决router-link点击事件

总结
可能有些地方使用router-link，有些绑定方式实现路由跳转，有些地方只是简简单单的实现高亮，我们则选择合适我们的方法
上面有些方法也适用于多种情况，活学活用即可
后续如果想到其他方法，会继续更；如果有什么错误，会改正
使用watch或则computed或则指令等等，和上面的思路和方法都是大同小异
其实基本是实现要添加一个类
————————————————
版权声明：本文为优快云博主「前端薛之谦…」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_41105030/java/article/details/88184933