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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
解决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
漂亮但不安全的CTB
2006/10/09 PHP
php.ini 中文版
2006/10/28 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
php适配器模式介绍
2012/08/14 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python中list列表的高级函数
2016/05/17 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
django model通过字典更新数据实例
2020/04/01 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
关爱留守儿童倡议书
2014/04/15 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python