active-class 属于哪个组件中的属性？该如何使用？

active-class 属于vue-router的样式方法，当router-link标签被点击时将会应用这个样式

API参考地址：API 参考 | Vue Router (vuejs.org)

active-class#

• 类型：string

• 默认值："router-link-active" (或者全局 linkActiveClass)

• 详细内容：

  链接激活时，应用于渲染的 <a> 的 class。

一、active-class 的使用方式

在 vue-router 中使用 active-class 有两种方式:

1. 在 router-link 中写入 active-class

active-class 选择样式时根据路由中的路径（to=“/home”）去匹配，然后显示

<router-link to="/home" class="menu-home" active-class="active">首页</router-link>

2. 直接在路由 js 文件中配置 linkActiveClass

export default new Router({
	linkActiveClass: 'active',
})

<div class="menu-btn">
	<router-link to="/" class="menu-home" active-class="active">首页</router-link>
</div>
<div class="menu-btn">
	<router-link to="/my" class="menu-my" active-class="active">我的</router-link>
</div>

二、会产生的问题

因为 to="/" 引起的，active-class 选择样式时根据路由中的路径去匹配，然后显示。
例如在 my 页面中，路由为 localhost:8081/#/my，那么 to="/”和 to="/my"都可以匹配到，所以都会激活选中样式

三、解决方法

1. 在 router-link 中写入 exact

<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>

2. 在路由中加入重定向

<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>
 
{path: '/', redirect: '/home' }