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选择器的工作原理和优化分析
Jul 25 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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
Wordpress php 分页代码
2009/10/21 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php实现多城市切换特效
2015/08/09 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python调用C语言程序方法解析
2020/07/07 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
交通事故检查书范文
2014/01/30 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
消防演习通知
2015/04/25 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL