vue.js 使用router-link替代a标签实现高亮

在Vue.js中，可以使用<router-link>组件来替代<a>标签实现高亮效果。<router-link>是Vue-Router提供的组件，用于路由导航。

首先，需要在Vue项目中安装Vue-Router。可以使用以下命令安装：

npm install vue-router

然后，在Vue项目的入口文件（一般是main.js）中，导入Vue-Router并创建路由实例，例如：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

接着，在Vue组件的模板中，可以使用<router-link>来代替<a>标签。<router-link>接收一个to属性，用于指定要跳转到的路由路径。例如：

<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>

为了实现高亮效果，可以使用router-link-active类名，它会在当前路由匹配时自动添加到<router-link>的元素上。可以通过active-class属性来自定义类名。例如：

<router-link to="/home" active-class="active">Home</router-link>
<router-link to="/about" active-class="active">About</router-link>

此外，还可以使用exact-active-class属性来指定精确匹配时的类名。例如：

<router-link to="/home" active-class="active" exact-active-class="exact-active">Home</router-link>
<router-link to="/about" active-class="active" exact-active-class="exact-active">About</router-link>

最后，需要在全局样式表中定义.active类和.exact-active类的样式，以实现高亮效果。例如：

.active {
  color: #ff0000;
}

.exact-active {
  font-weight: bold;
}

这样，当当前路由与<router-link>的to属性匹配时，<router-link>的元素会自动添加.active类名，从而实现高亮效果。

请注意，上述代码仅作为示例，实际项目中的路由配置和样式定义可能有所不同。在实际项目中，需要根据自己的需求进行适当的调整。