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 Konami Code 实现代码
Jul 29 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 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模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
php查询ip所在地的方法
2014/12/05 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
php实现session共享的实例方法
2019/09/19 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python ljust rjust center输出
2008/09/06 Python
pyramid配置session的方法教程
2013/11/27 Python
Python深入学习之内存管理
2014/08/31 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
浅析python中while循环和for循环
2019/11/19 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
户外用品商店创业计划书
2014/01/29 职场文书
电子专业求职信
2014/06/19 职场文书
大学生求职信例文
2014/06/29 职场文书
社区创先争优承诺书
2014/08/30 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
公务员年度个人总结
2015/02/12 职场文书
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL