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

最新推荐文章于 2024-07-24 07:45:00 发布

原创最新推荐文章于 2024-07-24 07:45:00 发布 · 4.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue实现路由高亮 #router-link #router-link-active #$router #vue

vue 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了在Vue中实现路由高亮的各种方法，包括使用`active-class`、`router-link-active`、`linkExactActiveClass`，以及根据路径、data、meta信息和JavaScript操作实现高亮。同时，还探讨了在不同场景下如何选择合适的方法，并提到了在处理`router-link`点击事件时的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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

路由高亮

active-class

使用类名,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 进行全局配置的

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

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

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

<!-- 此时，当点击该链接时，/user同样也会匹配到router-link-active -->
<router-link to="/user/a">去到user子页面</router-link>

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

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

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

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

<button @click.once="$router.back()">返回</button>

去掉历史记录，可以使用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'
})

这是路由效果图

其它方式实现高亮

我们有时候不需要路由，或则不想要路由，可能路由也实现不了,或则不加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>
    <!-- <router-view></router-view> -->
  </div>
</template>
<script>
export default {
   methods:{
      goTo(url){
        this.$router.push(url)
      }
   }
};
</script>
<style>
......
/* 这是提供li高亮的 */
li.active{
  color: green;
}
</style>

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

两种方法：在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>

如果标签较多的话，可以使用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修饰符才能绑定事件

总结

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