vue中路由激活效果

导航栏是场景的网页效果，那么在vue中导航栏一般使用<router-link>通过循环实现，然后实现的效果是点击每一个元素，跳转到对应路由，以此来显示不同的页面

那么点击元素怎么让它添加一个选中状态呢。

类似上面这样，启动网站，首页选中，然后点击 消息，消息选中呢？

如下提供2种方法：

1、class ：

查看控制台，发现vue给router-link中当前点击的元素动态添加了一个class名（router-link-exact-active），当点击其他元素时又取消了这个class名，那么我们可以通过给这个class名设置样式，达到路由激活的选中效果(router-link默认是a标签，可以改为其他标签)

#nav a {
  display: block;
  color: #000;
}

#nav a.router-link-exact-active {
  color: #f60;
}

2、路由配置 ：

①、在路由文件中，配置  linkExactActiveClass:"active"

// router.js


import Vue from 'vue';
import Router from 'vue-router';
// ......

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  linkExactActiveClass:"active",        // 添加这个
  routes: [    
    {
      path: '/',
      name: 'Home',
      components: {
        routerCenter: Home,
      },
   }
 ]
});

②、在标签上添加class名 exact-active-class="active"  ，然后给class名添加样式（我这里是点击激活切换背景图）

<div class="showHeaderTitle">
        <router-link
          :to="item.url"
          :key="index"
          v-for="(item,index) in HeaderTitle"
          exact-active-class="active">
            {{item.title}}
        </router-link>
      </div>

#nav a {
  display: block;
  min-width: 131px;
  min-height: 36px;
  line-height: 36px;
  font-weight: bold;
  color: #fff;
  background: url("static/img/index/title.png") no-repeat center center;
}

#nav .active {
  color: #fff;
  background: url("static/img/index/titleCurr.png") no-repeat center center;
}

其实看上去2种方法没什么区别，第二种反而更繁琐，但是针对只有一个路由的情况，比如上述图片那种情况，就可以优先考虑使用第一种，但是如果不止一个导航栏，在路由里面还有子路由的导航选中效果，第一种就不生效，可以考虑使用第二种。

好了，如有问题，请指出，接受批评。

个人微信公众号：