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 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 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/01/23 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
js实现网页随机验证码
2020/10/19 Javascript
在windows下Python打印彩色字体的方法
2018/05/15 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Python 如何创建一个线程池
2020/07/28 Python
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
旷课检讨书2000字
2014/01/14 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
整改报告格式
2014/11/06 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js