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 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
解决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
一个域名查询的程序
2006/10/09 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
解析php中curl_multi的应用
2013/07/17 PHP
django中的ajax组件教程详解
2018/10/18 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
js option删除代码集合
2008/11/12 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python区分不同数据类型的方法
2019/10/14 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
SQL Server笔试题
2012/01/10 面试题
毕业生文员求职信
2013/11/03 职场文书
自荐信格式简述
2014/01/25 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
语文课外活动总结
2014/08/27 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
2015高考寄语集锦
2015/02/27 职场文书
律师催款函范文
2015/06/24 职场文书
离婚协议书范文2016
2016/03/18 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript