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 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
window.location.hash 属性使用说明
Mar 20 Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
js实现简单选项卡功能
Mar 23 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 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计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Django model class Meta原理解析
2020/11/14 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
创伤外科专业推荐信范文
2013/11/19 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
鉴史问廉观后感
2015/06/10 职场文书
防震减灾主题班会
2015/08/14 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
六年级作文之自救
2019/12/19 职场文书