路由按钮样式设置

路由按钮样式设置

标签按钮被单击访问，其对应组件就显示，为了使得用户体验比较好，要给当前的按钮设置与众不同的css样式，使得可以很清楚地知道是哪个按钮正在被访问，增强用户体验。

语法：

在App.vue中设置如下css样式：

<style lang="less" scoped>
/*给激活按钮设置高亮样式*/
.router-link-active{color:blue;}
</style>

通过观察，发现按钮被访问激活后，其对应的html标签就会存在 class=“router-link-active” 的属性值

提示：

​ 被激活的按钮的class属性值里边还有一个值为 router-link-exact-active 的信息，不要使用，其表达的意思是，只有路由严格匹配的时候才会出现这个信息，模糊匹配时候该信息就没有了，造成高亮失效，可以用来设置子路由按钮样式。