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匿名函数的问题分析
Mar 30 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
js实现星星海特效的示例
Sep 28 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
Python实现简单的语音识别系统
2017/12/13 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
党员思想汇报范文
2013/12/30 职场文书
出生证明公证书
2014/04/09 职场文书
服务理念口号
2014/06/11 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
Python实现双向链表基本操作
2022/05/25 Python
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL