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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
vue自定义filters过滤器
Apr 26 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 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
php隐藏实际地址的文件下载方法
2015/04/18 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
vue如何截取字符串
2019/05/06 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python选课系统开发程序
2016/09/02 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
对Python中range()函数和list的比较
2018/04/19 Python
python实现字符串和字典的转换
2018/09/29 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
解决python flask中config配置管理的问题
2019/07/26 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
python如何导入依赖包
2020/07/13 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
教师自荐信
2013/12/10 职场文书
班长自荐书范文
2014/02/11 职场文书
施工安全责任书范本
2014/07/24 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
Redis性能监控的实现
2021/07/09 Redis