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 相关文章推荐
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
js面向对象的写法
Feb 19 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
深入研究React中setState源码
Nov 17 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
实例详解带参数的 npm script
May 28 Javascript
详解Vue中的watch和computed
Nov 09 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实现上传文件并存进数据库的方法
2015/07/16 PHP
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
简明 Python 基础学习教程
2007/02/08 Python
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Keras loss函数剖析
2020/07/06 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Linux开机引导的步骤是什么
2014/02/26 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
领导班子整改措施
2014/10/24 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
python 批量压缩图片的脚本
2021/06/02 Python