Vue 解决父组件跳转子路由后当前导航active样式消失问题


Posted in Javascript onJuly 21, 2020

举个栗子,导航栏如下图,当前新闻资讯的路由是:localhost:8083/#/new,导航栏样式如图所示:

Vue 解决父组件跳转子路由后当前导航active样式消失问题

随便挑个新闻点击后会跳转到子路由:localhost:8083/#/new/newDetail,这时候新闻资讯的主路由style样式出现消失的问题,如下图:

Vue 解决父组件跳转子路由后当前导航active样式消失问题

style代码:

.router-link-exact-active{
 color: #8fc526!important;
 border-top: 4px solid #8fc526!important;
 }

router.js代码:

{
  path: '/new',
  name: 'new',
  component: news,
  children: [
  {
   path: '/new/newDetail',
   name: 'newDetail',
   component: newsDetail
  }
  ]
 }

解决方案:

将style方案改成下面即可

.router-link-active{
 color: #8fc526!important;
 border-top: 4px solid #8fc526!important;
}

类名设置为router-link-active,即使是跳转到子路由也不会影响到主路由的样式问题

补充知识:解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法

解决办法是给menu的default-active绑定route.path

形如:

<el-menu :default-active="$route.path" ...>

每次渲染menu都会读当前path 设置为default-active

以上这篇Vue 解决父组件跳转子路由后当前导航active样式消失问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
JS ES6异步解决方案
Apr 29 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 #Javascript
vue 实现tab切换保持数据状态
Jul 21 #Javascript
vue通过过滤器实现数据格式化
Jul 20 #Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 #Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 #Javascript
简单了解前端渐进式框架VUE
Jul 20 #Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php使用websocket示例详解
2014/03/12 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
js实现点赞效果
2020/03/16 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
如何运行Python程序的方法
2013/04/21 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
python提取log文件内容并画出图表
2019/07/08 Python
Python编程中类与类的关系详解
2019/08/08 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
工作汇报开头与结尾怎么写
2014/11/08 职场文书
平安建设汇报材料
2014/12/29 职场文书
企业投资意向书
2015/05/09 职场文书