Vue中路由设置路由高亮的两种方式

根据Vue Router官方API文档我们可以通过以下两种方式去设置路由高亮

active-class

类型: string

默认值: "router-link-active"

设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

第一种方式：

使用Vue内置的属性

设置router-link-active的样式

如：

.router-link-active{

            font-size: 32px;

            color: antiquewhite;

        }

第二种方式：

自定义样式：

在新建的路由对象内部设置linkActiveClass属性，该属性与routes属性平级

linkActiveClass: 'myActive'

然后如第一种方式一样设置myActive这个类的样式

.myActive{

            font-size: 32px;

            color: antiquewhite;

        }

active-class

类型: string

默认值: "router-link-active"

设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。