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 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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代码把全角数字转为半角数字
2007/12/10 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
python将ansible配置转为json格式实例代码
2017/05/15 Python
彻底搞懂Python字符编码
2018/01/23 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
python3中的md5加密实例
2018/05/29 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
python爬取微博评论的实例讲解
2021/01/15 Python
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
投标承诺书范本
2014/03/27 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
毕业生对母校寄语
2015/02/26 职场文书
python如何做代码性能分析
2021/04/26 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js