vue按钮高亮，添加类，点击高亮，路由router高亮linkExactActiveClass（多种方法实现）...

╰+哭是因爲堅強的太久メ 2022-03-12 07:40 664阅读 0赞

### vue样式高亮 ###

使用vue/cli3脚手架创建一个有router路由的项目,并且运行该项目

vue create 'project-name'
    cnpm i
    cnpm run serve

清理App.vue的内容，在新建page文件夹并新建响应的组件，配置路由

import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    import Home from '../page/Home.vue'
    import Setting from '../page/Setting.vue'
    import User from '../page/User.vue'
    
    export default new VueRouter({ 
    	routes:[
    		{ path:'/',redirect:'/home'},
    		{ path:'/home',component:Home},
    		{ path:'/setting',component:Setting},
    		{ path:'/user',component:User},
    	]
    })

App.vue

<template>
      <div id="app">
       <router-link to="/home">去到home页面</router-link>
       <router-link to="/user">去到user页面</router-link>
       <router-link to="/setting">去到setting页面</router-link>
       <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default { 
    
    };
    </script>
    
    <style>
    #app{ 
      color: #fff;
      background: hotpink;
    }
    a{ 
      text-decoration: none;
      color:  #fff;
      margin-right: 20px;
    }
    a.active{ 
      background: #fff;
      color: hotpink;
    }
    </style>

![初始界面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]  
router-link解析成的是`<a></a>`标签，可以根据自己的需求使用`tag="li"`(这样是解析成li标签)解析成自己想要的标签

### 路由高亮 ###

##### active-class #####

1.  使用类名`,router-link-active`或则`router-link-exact-active`  
    我们渲染完界面观察可知，vue会产生该路由两个类名:router-link-active和router-link-exact-active

*  router-link-active:设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选linkActiveClass 来全局配置
 *  router-link-exact-active:配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的

1.  我们直接在style匹配使用该类名匹配我们想要的样式即可

.router-link-active{ 
      color: green;
    }

1.  部分情况需要使用exact来开启router-link严格模式

<router-link to="/user/a">去到user子页面</router-link>

<router-link to="/user" exact>去到user页面</router-link>

1.  当然可以直接使用.router-link-exact-active精确匹配,这样就不需要使用exact了

.router-link-exact-active{ 
      color: blue;
    }
    /* .router-link-active{ color: green; } */

1.  我们添加返回按钮同样也会高亮(当有历史记录，点击返回上个按钮依旧会高亮)

1.  去掉历史记录，可以使用replace，在页面不会留下历史标签，可能在部分高亮不需要

<router-link to="/user/a" replace>去到user子页面</router-link>

##### router-link-active、linkExactActiveClass #####

router-link-active:全局配置 的默认“激活 class 类名”  
linkExactActiveClass：全局配置 精确激活的默认的 class  
在上面App.vue已经写了active的样式了，我们介绍其中的用法：需要到router文件里面的路由规则匹配

export default new VueRouter({ 
    	routes:[
    		...
    		...
    	],
    	linkExactActiveClass:'active'
    })

![这是路由效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]

### 其它方式实现高亮 ###

我们有时候不需要路由，或则不想要路由，可能路由也实现不了,或则不加router-link，或则单纯的实现高亮…

##### 根据路径实现（在做tabbar底部导航栏时比较适用） #####

<template>
      <div id="app">
        <ul>
          <li @click="goTo('/home')">home</li>
          <li @click="goTo('/user')">user</li>
          <li @click="goTo('setting')">setting</li>
        </ul>
        
      </div>
    </template>
    <script>
    export default { 
       methods:{ 
          goTo(url){ 
            this.$router.push(url)
          }
       }
    };
    </script>
    <style>
    ......
    /* 这是提供li高亮的 */
    li.active{ 
      color: green;
    }
    </style>

我们点击哪一个vue都不会为我们提供一个类  
![我们还是使用最初的app样式][app]  
这里涉及两个主要的知识点:(1)我们可以传给 v-bind:class 一个对象，以动态地切换 class(2)$route.path获取地址栏的路径

1.  两种方法：在template来使用class对象语法来实现:当点击的路径和路由路径一样时则添加该类

<li @click="goTo('/home')" :class="{active:'/home'===$route.path}">home</li>
    <li @click="goTo('/user')" :class="{active:'/user'===$route.path}">user</li>
    <li @click="goTo('setting')" :class="{active:'/setting'===$route.path}">setting</li>

1.  如果标签较多的话，可以使用v-for进行渲染；然后在methods使用方法直接判断

methods:{ 
          goTo(url){ 
            this.$router.push(url)
            if(this.$route.path==url){ 
              
            }
          }
       }

##### 利用data（在做滚动导航栏比较适合，或则后台有提供数据） #####

<template>
      <div id="app">
        <ul>
            <li v-for="item in list" :key="item.id" :class="{active:item.id==type}" @click="addActive(item.id)">{ { item.value}}</li>
        </ul>
      </div>
    </template>
    <script>
    export default { 
      data(){ 
        return { 
          list:[
            { id:1,value:'home'},
            { id:2,value:'user'},
            { id:3,value:'setting'}
          ],
          type:1
        }
      },
       methods:{ 
          addActive(){ 
    
          }
       }
    };
    </script>

根据以上情况很明显了；就是通过点击改变data数据里面的type。这是模拟的数据，在实际过程中使用的数据各不相同，需要我们在添加想要的数据

addActive(id){ 
            this.type = id  //改变type跟id一样，即可添加类
          }

##### 利用meta #####

这种方法和上面两种思路基本一致，没多大区别，而且要涉及到路由，看看即可

{ path:'/home',component:Home,meta:{ mypath:'/home'}},
    { path:'/setting',component:Setting,meta:{ mypath:'/setting'}},
    { path:'/user',component:User,meta:{ mypath:'/user'}},

这里就不深究了

##### 直接用JS操作（比较难以实现的高亮再来使用） #####

Vue其实不建议我们用dom或则bom操作，所以最好用Vue提供给我们的，我们使用refs来绑定属性

<template>
      <div id="app">
        <ul ref="ulCon">
            <li v-for="item in list">{ { item.value}}</li>
        </ul>
      </div>
    </template>
    <script>
    export default { 
      data(){ 
        return { 
          list:[
            { id:1,value:'home'},
            { id:2,value:'user'},
            { id:3,value:'setting'}
          ]
        }
      },
      methods:{ 
      },
      mounted(){ 
         let ul = this.$refs.ulCon
         let list = ul.children
         list[0].classList.add('active')
         ul.addEventListener('click', ($event)=>{ 
            for(var i = 0;i<list.length;i++){ 
              list[i].classList.remove('active')
            }
            $event.target.classList.add('active')
         })
      }
    };
    </script>

##### 顺便一题，可能绑定router-link实现高亮，那么解决router-link点击事件 #####

<router-link tag="li" :to="'/'+item.value" v-for="item in list" :key="item.id" @click.native="addActive()">{
       {item.value}}</router-link>

**.native:直接监听一个原生事件,加个native 就是告诉vue 这个标签现在有主了 它是H5标签可以加事件了.;router-link 其实就是一个封装好的 .vue 组件，所以需要 加.native修饰符才能绑定事件**

### 总结 ###

1.  可能有些地方使用router-link，有些绑定方式实现路由跳转，有些地方只是简简单单的实现高亮，我们则选择合适我们的方法
2.  上面有些方法也适用于多种情况，活学活用即可
3.  后续如果想到其他方法，会继续更；如果有什么错误，会改正
4.  使用watch或则computed或则指令等等，和上面的思路和方法都是大同小异
5.  其实基本是实现要添加一个类

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220312/c61f2055ac5343e6827e7748e8d449ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220312/b76c8b1df9344ab08f0059909380f99f.png
[app]: /images/20220312/f38af8db3d024b3ea1d3d0a2e78c2fce.png