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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
javascript读写json示例
Apr 11 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php入门小知识
2008/03/24 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python中实现三目运算的方法
2015/06/21 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
酒店采购员岗位职责
2014/03/14 职场文书
法定代表人授权委托书
2014/09/19 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
教你如何用cmd快速登录服务器
2022/06/10 Servers