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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 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
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
python能否java成为主流语言吗
2020/06/22 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
最新党员思想汇报
2014/01/01 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
二手房购房意向书
2015/05/09 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL