vue-router为激活的路由设置样式操作


Posted in Javascript onJuly 18, 2020

1.首先先写好类名

vue-router为激活的路由设置样式操作

2.在router里的js文件中添加 linkActiveClass:'active'

vue-router为激活的路由设置样式操作

补充知识:记录vue遇到问题,子页面没有router-link对应导航栏激活样式

如下所示:

li><router-link to="/basicSearch" :class="{'link-active':linkBoolean}">基础检索</router-link></li>

data () {
 return {
  imgUrl,
  linkBoolean:false
 }
 },
 created(){
 
 if(this.$route.path == "/storeDetails" || this.$route.path == "/utxoDetails" ||      
 this.$route.path == "/blockAllDetails"){
  this.linkBoolean = true
 }
 },

根据Router中子页面链接名称,指定对应上级页面的导航样式是否激活

以上这篇vue-router为激活的路由设置样式操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 #Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 #Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 #Javascript
vue element table中自定义一些input的验证操作
Jul 18 #Javascript
vue cli4.0项目引入typescript的方法
Jul 17 #Javascript
js实现省级联动(数据结构优化)
Jul 17 #Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
《寓言两则》教学反思
2014/02/27 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS