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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
js下载文件并修改文件名
May 08 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
微信小程序实现留言板
Oct 31 Javascript
p5.js临摹动态图形的方法
Oct 23 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 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
php表单处理操作
2017/11/16 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
深入解析Python编程中JSON模块的使用
2015/10/15 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
生态养殖创业计划书
2014/05/06 职场文书
2014公司年终工作总结
2014/12/19 职场文书
尊师重教主题班会
2015/08/14 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书