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使用技巧简单汇总
Apr 18 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
JS查找孩子节点简单示例
Jul 25 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实现图片裁剪、添加水印效果代码
2014/10/01 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
Python函数基本使用原理详解
2020/03/19 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
离婚财产分配协议书
2014/10/21 职场文书
世界文化遗产导游词
2015/02/13 职场文书