vue子路由选中后父路由样式消失解决办法

最新推荐文章于 2023-12-20 21:50:02 发布

diqin3847

最新推荐文章于 2023-12-20 21:50:02 发布

阅读量2.3k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jeromeNie/p/10917426.html

版权

一、在子路由前面加上父路由路径

{

path: "/foundMusic",

component: FoundMusic,

children: [

{ path: "/foundMusic/newdisc", component: NewDisc },

{ path: "/foundMusic/radio", component: Radio },

{ path: "/foundMusic/rank", component: Rank },

{ path: "/foundMusic/recommend", component: Recommend },

{ path: "/foundMusic/singer", component: Singer },

{ path: "/foundMusic/songs", component: Songs },

] }

二、使用.router-link-active代替.router-link-exact-active。

.router-link-active {

background: black;

&::after {

content: '';

display: block;

position: absolute;

bottom: 0;

left: 50%;

border-width: 5px;

border-color: transparent transparent red transparent;

border-style: solid; //利用伪类使选中路由添加红色三角样式

}

转载于:https://www.cnblogs.com/jeromeNie/p/10917426.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

diqin3847

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue 解决父组件跳转子路由后当前导航active样式消失问题

10-15

主要介绍了Vue 解决父组件跳转子路由后当前导航active样式消失问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

解决VUE路由刷新后数据消失样式丢失的问题

weixin_45271385的博客

07-21

3719

样式错乱解决方法将公用样式引入app.vue中 <style> @import "./views/xxx.css"; <style> 数据丢失解决方法首先，用params传参的刷新肯定会失去数据的，这里用query的方式，需要将数据转为JSON格式 let data = JSON.stringify({ UserInfo: this.UserInfo, domain: this.domain, loginUserDat

参与评论您还未登录，请先登录后发表或查看评论

【vue】vue element 只有一个子菜单时不显示父菜单

小朋友的博客

08-12

6054

vue element 只有一个子菜单时不显示父菜单

Vue——父组件跳转子路由后当前导航active样式消失问题

一只程序喵

07-07

1989

效果图如下：实现方法如下：一级路由（personal.vue）： <template> <div id="app"> <div> <h4 class="routerStyle"> <router-link to="/personal/personalwork"><span>作品管理</span></router-link> <router-link

关于element UI树（Tree）控件懒加载导致节点不刷新问题

Cai_975520397的博客

07-21

1917

文章引自：https://www.cnblogs.com/heyefengyin/p/11430073.html 主要使用内置的api， expand() 方法，强制再调用一次懒加载方法，刷新节点 <el-tree class="tree" ref="department" node-key="id" :lazy="true" :props="props" :load="ge

vue-cli 默认路由再子路由选中下的选中状态问题及解决代码

10-18

在本文中，我们将探讨一个特定的问题，即在Vue CLI创建的项目中，如何处理默认路由与子路由选中状态的问题。这个问题通常发生在当我们有多个同级路由，并且在切换子路由时，希望父路由的选中状态能够正确反映当前的...

当vue路由变化时,改变导航栏的样式方法

10-18

例如，当我们有一个导航栏组件，并希望当前选中的菜单项能够通过不同的样式来展示时，可以在`<router-link>`标签中使用`:class`绑定来根据路由的激活状态来动态添加样式类。例如： ```html $route.name === 'home' ...

vue子路由跳转实现tab选项卡

10-16

在这个例子中，`<router-view>`放在选项卡的主内容区域，用于展示被选中的子路由对应的页面。以下是具体的实现步骤： **1. 创建选项卡页面模板** 在`<template>`中，我们创建一个包含导航和内容区域的布局。`...

vue——router的一种操作——不显示父级路由的路径，只需要子级路径。

阿牛哥的博客

11-21

1578

vue——router的一种操作——不显示父级路由的路径，只需要子级路径。

基于vue-router 多级路由redirect 重定向的问题

10-18

今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue多级路由重定向以及父级样式丢失的问题。

someWhere_weMeet的博客

07-25

2881

公司整了一下午，被Vue的多级重定向绕晕了。回来静了下，终于解决了。好好记录下来。先看看html结构图上面这个是一级路由跳转的；下面这个是二级跳转的；需要注意： *** ***上图的标记1，to里加了'/',表示根据根路径跳转的；而下图的标记3，to没有加'/',表示根据当前页面的相对路径跳转的。这里借鉴了这位盆友的关于重定向redirect解读：https://blog.csd...

vue-router嵌套路由定向问题

前端kk的博客

04-19

1036

存在这样一个路由routes: [ { path: '/home', name: 'home', component: Nav, children: [ { path: 'index', name: 'index', component: Index ...

导航栏点击进入路由跳转详情页导航样式失效

weixin_51341210的博客

12-31

1252

导航栏点击进入路由跳转详情页导航样式失效el-menu解决导航样式失效的问题 el-menu解决导航样式失效的问题项目问题：两个同级的导航栏页面，一个主页面(/text)，一个详情页(/detail 导航栏false隐藏)，当点击进入详情是路由跳转/detail，所以/text的导航样式失效 解决办法：进行路由拦截判断，保留样式导航栏代码 <template> <div > <el-menu class="sidebar-menu" :

vue 子路由如何激活父路由_vue 子路由的选中状态会影响父路由的选中状态吗

weixin_42307478的博客

01-14

539

展开全部在vue-router中 active-class 只在选中的路由上添加active-class，并不会对其关联的路由链接添加active-class[{path:'/messageCenters',component:()=>System.import('./personalcenter/MessageCenter.vue')},{path:'/my_opinio...

vue路由跳转父页面隐藏