Vue 解决父组件跳转子路由后当前导航active样式消失问题
更新时间：2020年07月21日 09:17:56 作者：昔有木如盖
这篇文章主要介绍了Vue 解决父组件跳转子路由后当前导航active样式消失问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
举个栗子，导航栏如下图，当前新闻资讯的路由是：localhost:8083/#/new，导航栏样式如图所示：
随便挑个新闻点击后会跳转到子路由：localhost:8083/#/new/newDetail，这时候新闻资讯的主路由style样式出现消失的问题，如下图：
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样式消失问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue.js开发实现全局调用的MessageBox组件实例代码
最近学习了Vue.js，感觉组件这个地方知识点挺多的，而且很重要，所以决定记录下，下面这篇文章主要给大家介绍了关于利用vue.js开发实现全局调用的MessageBox组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-11-11
vue使用数组splice方法失效,且总删除最后一项的问题及解决
这篇文章主要介绍了vue使用数组splice方法失效,且总删除最后一项的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了Element-UI清空表单及验证不生效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
vue使用element-ui的el-date-picker设置样式无效的解决
本文主要介绍了vue使用element-ui的el-date-picker设置样式无效的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
今天小编就为大家分享一篇vue自定义switch开关组件,实现样式可自行更改，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
今天小编就为大家分享一篇vue监听input标签的value值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
摘要：Vue多选框回填是实现表单数据高效处理的常见需求,本文主要介绍了vue el-table实现多选框回填的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了使用Vue 3和Element-plus搭建前端项目的过程,包括项目搭建、Element-plus安装和引入、axios安装、sass使用、app.vue配置、组件创新、路由配置以及使用辅助插件来提高开发效率,需要的朋友可以参考下2025-02-02
混入(mixin)是一种非常灵活的方式,用来分发Vue组件中可复用的功能,一个混入对象可以包含任意组件选项,下面这篇文章主要给大家介绍了关于Vue混入和继承的相关资料,需要的朋友可以参考下2021-09-09
最新评论