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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
聊天工具的项目开发到了表情功能,由于目前会话的输入区域使用的是 textarea 而非富文本编辑器,所以表情功能也需要兼顾 textarea 进行开发,本文给大家简单聊聊几种表情的实现方,感兴趣的小伙伴一起来看看吧2025-01-01
弹窗是我们开发中经常遇到的一个功能,下面这篇文章主要给大家介绍了关于vue如何通过点击事件弹出弹窗页面的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了解决安装vue3脚手架@vue/cli报4048错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式，如果是大型项目，很多时候都需要在子组件之间传递数据，使用vue的状态管理工具vuex很好的解决2018-08-08
这篇文章主要介绍了vue如何使用js对图片进行点击标注圆点并记录它的坐标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue Router 是 Vue.js 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,这篇文章主要介绍了Vue Router的介绍与引入,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了详解nuxt sass全局变量(公共scss解决方案)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家详细介绍了vue+elementui实现选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue中使用vue2-perfect-scrollbar制作滚动条
这篇文章主要介绍了Vue中使用vue2-perfect-scrollbar滚动条,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
今天小编就为大家分享一篇解决Vue在Tomcat8下部署页面不加载的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论