12.路由设置高亮

1.设置高亮
设置路由后，检查页面代码，发现router-link在页面中直接渲染的是a标签，当前路由a标签含有一个名为 router-link-active的类。
所以我们可以直接设置router-link-active类名的样式，即可给当前路由设置高亮了。

<style scope>
.router-link-active{
  color: #fff;
  background-color: #333;
}

2.设置active类名
设置好之后，发现个别的路由（首页...）也含有高亮样式，这是因为路由上添加的active是根据全包含匹配的规则。（若首页路由为'/'，其他页面为'/other'，则页面在other上时，路径全包含了首页路径的一部分，这时首页路由也被添加上了active的类。）
解决方法：在首页路由上添加exact

<li><router-link to="/" exact>index</router-link></li>

当前所在的路由，会默认添加 router-link-active 的类，如需改变该类名，可在路径配置下（new Router下），添加linkActiveClass的值，则为修改后active类的值。

export default new Router({
    linkActiveClass:"active",
    routes: [
        {
            path: '/',
            name: 'index',
            component: index
        }]
})

另一种更简便的方式 ：直接在router-link中通过active-class指定类名，给含有active的a标签设置样式。

        <li v-for="type in types">
            <router-link active-class="active" :to="'/details/'+type.tag">{{ type.title }}</router-link>
        </li>

3.mode
给路由设置mode值，mode含有三个值：hash，history，abstract）
默认情况下为history

export default new Router({
    linkActiveClass:"active",
    mode:history,
    routes: [
        {
            path: '/',
            name: 'index',
            component: index
        }]
})