vue点击当前路由高亮小案例

更新时间：2019年09月26日 10:44:57 作者：小羽向前跑

这篇文章主要为大家详细介绍了vue点击当前路由高亮小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue点击当前路由高亮的具体代码，供大家参考，具体内容如下

功能展示：

组件代码：

标签上加exact

.router-link-active{
 background: rgba(255,255,255,0.8);
 color: gray;
 }

<template>
 <nav>
  <ul>
  <li>
   <router-link to="/" exact>博客</router-link>
   <router-link to="/AddBlog" exact>写博客</router-link>
  </li>
  </ul>
 </nav>
</template>
 
<script>
 export default {
  name: "bolgheader"
 }
</script>
 
<style scoped>
 ul{
 list-style-type: none;
 text-align: center;
 margin:0;
 }
 li{
 display: inline-block;
 margin:0 10px;
 }
 a{
 color:rgb(102, 119, 204);
 text-decoration: none;
 padding:12px;
 border-radius: 5px;
 font-size:20px;
 }
 nav{
 background: #eee;
 padding: 30px 0;
 margin-bottom: 40px;
 }
 .router-link-active{
 background: rgba(255,255,255,0.8);
 color: gray;
 }
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解vue-cli快速构建vue应用并实现webpack打包
这篇文章主要介绍了详解vue-cli快速构建vue应用并实现webpack打包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
浅析Vue为什么需要同时使用Ref和Reactive
这篇文章主要想来和大家一起探讨一下Vue为什么需要同时使用Ref和Reactive，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起了解一下
2023-08-08
vue+高德地图实现地图搜索及点击定位操作
这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue this.$router.go(-1);返回时如何带参数
这篇文章主要介绍了vue this.$router.go(-1);返回时如何带参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
vue中jsencrypt与base64加密解密的实用流程
vue项目里面使用到的加密和解密的方法,本文主要介绍了vue中jsencrypt与base64加密解密的实用流程,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10
使用this.$router.go(-1)遇到的一些问题及解决
这篇文章主要介绍了使用this.$router.go(-1)遇到的一些问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
vue实现导航菜单和编辑文本的示例代码
这篇文章主要介绍了vue实现导航菜单和编辑文本功能的方法，文中示例代码非常详细，帮助大家更好的参考和学习，感兴趣的朋友可以了解下
2020-07-07
vue导出excel文件流中文乱码问题及解决
这篇文章主要介绍了vue导出excel文件流中文乱码问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
Vue组件跨层级获取组件操作
这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue极简生成器 Vuepress的实现
本文主要介绍了Vue极简生成器 Vuepress的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>
2022-06-06