Vue-Router

// vue1
<a v-link="{ path: '/', activeClass: 'custom-active-class' }"></a>
// vue2
<router-link to="home" active-class="custom-active-class">Home</router-link>

但是这里有一个小问题, 如果该链接是根路由, 那么访问任何路由, 根路由都会被添加custom-active-class, 怎么解决呢?
只要添加exact: true即可, 这样就要求地址要完整匹配, 才会添加ActiveClass

React-Router

import {Link} from 'react-router'
// ...
<Link activeClassName="v-link-active" to="/">

React-Router 一样会有Vue-Router的问题, 不过也有解决方法, 我们需要用到IndexLink

import {IndexLink} from 'react-router'
// ...
<IndexLink to="/" activeClassName="active">Home</IndexLink>

另一种方法是使用Link组件的onlyActiveOnIndex属性，也能达到同样效果。

import {Link} from 'react-router'
// ...
<Link to="/" activeClassName="active" onlyActiveOnIndex={true}>Home</Link>

实际上，IndexLink就是对Link组件的onlyActiveOnIndex属性的包装