Vue->实现点击导航高亮效果

前言

在大多数一栋Apple中都能常常见到一种效果就是选项卡、底部导航、头部导航，在vue中也有嵌套路由这样的实现，本文中主要讲述的是底部导航栏点击选中让其有一个高亮的状态。那这个怎么作呢，请听我一一道来！

第一步
在路由配置文件中的routers数组对象上面加入代码

linkActiveClass: 'active'
复制代码

第二步
在你须要高亮的router-link标签中加入active-class属性

<router-link to='/recommend' tag='div' active-class="class类名字">
    //DOM
</router-link>
复制代码

第三步
在style中编写active-class中给定的class类名样式

.class类名 {
    color: green
}
复制代码

效果图

结束语

但愿个人分享对你有所帮助，更多资讯请持续关注，我会分享愈来愈多的实战经验哦！ 或加入大前端知识体系社区一块儿探索技术:608229520