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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
基于vue.js实现的分页
Mar 13 Javascript
webpack4简单入门实例
Sep 06 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
微信小程序点击保存图片到本机功能
Dec 13 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数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
vue mounted组件的使用
2018/06/18 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
2014年大学生四年规划书范文
2014/04/03 职场文书
入党心得体会
2019/06/20 职场文书