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之empty()与remove()区别说明
Sep 10 Javascript
javascript常用代码段搜集
Dec 04 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
php session 检测和注销
2009/03/16 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
python 实现判断ip连通性的方法总结
2018/04/22 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
Python秒算24点实现及原理详解
2019/07/29 Python
Python @property使用方法解析
2019/09/17 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
Servlet面试题库
2015/07/18 面试题
高职助产应届生自荐信
2013/09/24 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
个人剖析材料范文
2014/09/30 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
Redis可视化客户端小结
2021/06/10 Redis
利用python进行数据加载
2021/06/20 Python
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS