vue中路由激活效果

清疚 2021-09-29 15:52 398阅读 0赞

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

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

![20190716101257505.png][]

![20190716101306935.png][]

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

如下提供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种方法没什么区别，第二种反而更繁琐，但是针对只有一个路由的情况，比如上述图片那种情况，就可以优先考虑使用第一种，但是如果不止一个导航栏，在路由里面还有子路由的导航选中效果，第一种就不生效，可以考虑使用第二种。

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

个人微信公众号：

![20200824115156827.png][]

[20190716101257505.png]: /images/20210812/668178dcf086469a9fb10b970b265014.png
[20190716101306935.png]: /images/20210812/adb0df8e53da48cfbc99c353a8f0a6e6.png
[20200824115156827.png]: /images/20210812/5e952e8928cb4ac08f28f7a5e1c3b757.png