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 相关文章推荐
js 中{},[]中括号,大括号使用详解
May 12 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
浅谈js中对象的使用
Aug 11 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
Angular 数据请求的实现方法
May 07 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
php unlink()函数使用教程
2018/07/12 PHP
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
生成二维码方法汇总
2014/12/26 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
基于python编写的微博应用
2014/10/17 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
python实现报表自动化详解
2017/11/16 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
秋季运动会加油稿200字
2014/01/11 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
汽车广告策划方案
2014/05/31 职场文书
绿色出行口号
2014/06/18 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers
postgresql中如何执行sql文件
2023/05/08 PostgreSQL