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


Posted in Javascript onSeptember 26, 2019

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 #Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 #Javascript
IDEA安装vue插件图文详解
Sep 26 #Javascript
layui use 定义js外部引用函数的方法
Sep 26 #Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 #Javascript
对Layer UI 模块化的用法详解
Sep 26 #Javascript
vue源码中的检测方法的实现
Sep 26 #Javascript
You might like
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
AngularJS内置指令
2015/02/04 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
javascript实现雪花飘落效果
2020/08/19 Javascript
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
使用索引有什么好处
2016/07/27 面试题
程序集与命名空间有什么不同
2014/07/25 面试题
行政助理求职自荐信
2013/10/26 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
暑期培训随笔感言
2014/03/10 职场文书
师范生自我鉴定
2014/03/20 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书