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

在Vue.js中，可以使用<router-link>组件来替代<a>标签实现高亮效果。<router-link>是Vue-Router提供的组件，用于路由导航。
起首，需要在Vue项目中安装Vue-Router。可以使用以下命令安装：

1. npm install vue-router

复制代码

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

1. import Vue from 'vue'
2. import VueRouter from 'vue-router'
4. Vue.use(VueRouter)
6. const router = new VueRouter({
7.   routes: [
8.     // 路由配置
9.   ]
10. })
12. new Vue({
13.   router,
14.   render: h => h(App)
15. }).$mount('#app')

复制代码

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

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

复制代码

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

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

复制代码

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

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

复制代码

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

1. .active {
2.   color: #ff0000;
3. }
5. .exact-active {
6.   font-weight: bold;
7. }

复制代码

如许，当当前路由与<router-link>的to属性匹配时，<router-link>的元素会主动添加.active类名，从而实现高亮效果。
请留意，上述代码仅作为示例，实际项目中的路由配置和样式界说可能有所差别。在实际项目中，需要根据自己的需求进行适当的调整。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。