vue问题 - 点击二级菜单上级菜单自动收缩

最新推荐文章于 2023-10-10 15:51:27 发布
最新推荐文章于 2023-10-10 15:51:27 发布
阅读量2.9k 收藏 2
点赞数 1
分类专栏： ant design pro of vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39061000/article/details/118148106
版权

使用 ant design pro vue 框架，配置动态菜单时，遇到 点击二级菜单会自动收缩到父菜单的问题

通过一系列查找问题资料，最终锁定在  路由配置 问题上

在仔细检查了路由配置后，发现父级路由  即 一级数据上的  path 与 redirect 配置成一样的了，

redirect重定向地址, 访问这个路由时,自定进行重定向
path跳转路由

2个是不一样的东西

这样重新配置好之后，问题就解决好了，点击子菜单，父级仍然展开，达到了想要的效果

春涧草茶
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Vue2(三)实现子菜单展开收缩，带动画效果实现方法
11-26
以前做这种操作就是简单的display：block，但现在用户的要求也越来越高，需要美观和动画感。 现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。 看下效果图： 点开效果： 其实原理比较简单，就是通过子菜单的 max-height: 0;和 max-height: 2000px来实现子菜单的显示和关闭。加上css3的 transition: max-height .3s;来实现动画效果。 子菜单的样式： .tree-son-menu{ background-color: #FFF; .menu-body { z-index: 20; position: r
vue+elementUI导航中，点击body子菜单收缩的问题
weixin_39725702的博客
12-10 5047
vue+elementUI导航中，点击body子菜单收缩的问题 项目中用到了vue+elementUI,发现点击body导航子菜单会收缩的问题 原因：是elementUI版本的问题，发现我使用的是2.4.11版本，卸载重新安装2.4.9版本就可以了 安装命令： cnpm uninstall element-ui//卸载 cnpm install element-[email protected] --save ...
Vue iview-admin框架二级菜单改为三级菜单的方法
08-27
主要介绍了Vue iview-admin框架二级菜单改为三级菜单的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
利用vue-router实现二级菜单内容转换
11-27
二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变url，跳到相应的页面；还有一种就是frame。 如果用vue的话，可以用vue-router改变<router>里面的组件，这样就能做到不刷新页面都能跳到相应“页面”。其实url地址还是变了，但是他没有刷新页面其他位置的内容，只是改变了<router>里面的组件，渲染了新的组件。 在线demo：http://runjs.cn/code/9th3cgxo html 使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后
Ant Design Vue侧边栏收缩的一个小坑~
最新发布
Yjx的博客
10-10 343
主要是组件最外层div标签影响到了样式，再者就是细心问题，我把icon组件和title写在一个span标签里面所导致。
vue点击按钮收缩菜单
renkai721的专栏
09-22 1017
vue菜单收缩,vue菜单折叠,element菜单折叠,element菜单收缩，点击按钮收缩菜单
Element ui NavMenu 默认展示一个菜单的子菜单，点击子菜单会折叠的解决方法
qq_36714045的博客
12-09 2219
改成 :default-openeds="['1','2']" 数值写死改成变量就行了。问题：点击子菜单，会折叠起来。
Ant Design Pro 中 点击子菜单的时候，其他菜单不自动收起来 解决方案
EastRiseJi的博客
08-11 3034
记录一波自己在这段时间碰到的一个Ant Design Pro 的坑： 每次点击菜单都会将其他菜单自动收起来，导致一系列的用户体验不佳。 经过各种查，官网并没有指出此设置，在我疯狂尝试后，发现如下解决方案（说起来也很简单就加一个值即可）： <ProLayout openKeys={false} // 只需要在ProLayout中 新增设置此值 ></ProLayout> ...
Vue实现ul二级菜单的点击展开和收缩
weixin_52121537的博客
07-17 2930
Vue实现ul二级菜单的点击展开和收缩
解决antd side侧边栏菜单收缩时二级菜单不跟随
kzj0916的博客
08-19 1422
借用下图片，大概就是这种bug，直接看怎么解决吧，简单记录一下，有遇到相同问题的可以试试我这样的方法。我又回来了，BUG BUG BUG…核心代码都在上面，且有注释！
vue二级菜单导航点击选中事件的方法
10-18
今天小编就为大家分享一篇vue二级菜单导航点击选中事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue + element ui 实现侧边栏导航栏折叠收起
热门推荐
qq_44830060的博客
01-20 1万+
首页布局如下 要求点击按钮,将侧边栏收缩, 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。 methods: { // 点击按钮，切换菜单的折叠与展开 toggleCollapse() { this.isCollapse = !this.isCollapse; }, } 侧边栏代码 <!-- //侧边栏 --> <el-col :span="isCollap
vue：菜单收缩功能
1363648943的专栏
12-18 2286
想要实现：点击菜单能收缩。（效果如下：） 点击前： 点击后： 思路： 首先我们要知道绅缩的按钮和菜单是否在一个页面。在一个页面就简单了。 如果不在一个页面，就会涉级到父子级传参，绅缩按钮模块中要把状态传给header，这是兄弟间的传递参数，需要用到 vuex。如果不用vuex的话，就通过主体去操作。绅缩按钮把状态传给主体是子...
【vue+ElementUI】实现NavMenu侧边导航栏的手动缩放功能-类似表格缩放功能
wuchus的博客
07-24 5180
利用鼠标的mousedown、mouseup和mousemove事件实现ElementUI侧边栏的手动缩放功能。
vue点击其它侧边栏收缩_Vue通过控制样式实现顶部导航点击切换、侧边栏点击切换、手风琴折叠面板等功能...
weixin_39727976的博客
01-30 1093
我使用的是uni-app框架语法格式，普通的html同理。1、侧边栏：v-for="(item,key) in list_text":key=key:class="key==activeitemindex?'activeitem':''"@click="clickitem(key,item)">{{item}}export default {props:['list_text'],data(...
antd Menu组件 选择菜单时，收起其他菜单
weixin_43822134的博客
04-25 2529
需求：在展开多个菜单时，点击进入任意菜单，收起其他已展开的菜单 在antd中，有自带的只展开当前父级菜单的例子，但现在要做的并不是展开其他菜单时也要收起当前已展开的菜单，而是点击进入菜单后，再收起非当前父级菜单。 具体如下： 1、给Menu组件绑定 selectedKeys 和 openKeys const { selectedKeys, openKeys } = this.state; <Menu selectedKeys, openKeys >
实现vue项目登录后全刷新，又遇到菜单栏点击后选中但是合上了的问题
qq_43468165的博客
12-08 746
菜单点击合上了是因为在app.vue页面错用了刷新:key="$route.fullPath"，网上推荐这个写法是页面刷新的，但最终并没有实现。 在登陆后，获取了后端返回的值，获取了新的菜单。打印的时候发现Storage中的值已经变化了，但是抓狂的是，打印的时候，还是之前的值并没有改变。发现点击页面刷新的时候，菜单栏就重新渲染了。找了半天的vue带的刷新页面方法，没有实现。目前解决就是在登录成功后跳转到首页后，又进行刷新使用了window.location.reload()进行刷新的。 ...
ant-design-pro 顶部检索框展开收缩时，菜单栏的自动收起放开效果实现调查记录 2021-12-02
y1377593732的博客
12-03 2218
调查对象 搜索栏未打开状态 搜索栏打开状态 情况分析 在点击检索图标时，输入框会展开，左侧菜单会自动收起。 再次点击检索图标时，输入框会收起，左侧菜单会自动展开。 理论上组件之间应当解耦，所以实现上大概率不会使用组件之间互相调用的方式实现。 因此，进行了此项调查。 线索链 #ant-design-pro源码 #代码获取方案（花费时间比较长）：https://blog.csdn.net/ren365880/article/details/108967683 检索组件“HeaderSearch”在
antd-vue a-menu菜单绑定路由相关问题
weixin_45259917的博客
09-06 7773
antd-vue a-menu菜单绑定路由相关问题 tips: 路由绑定、菜单跳转、网页后退高亮显示 1. 问题描述 使用antd-vue 的 a-layout布局和a-menu菜单做一个侧边栏菜单，加入vuex配置侧边栏点击事件，实现点击菜单改变路由展示中间部分内容的功能 但是出现了问题： 重复点击路由报错 浏览器刷新/后退 菜单高亮区域没有根据路由的变化产生变化 2. 解决方法 对路由变化进行判断/修改router 的push与replace方法 借助a-me
vue-element-admin三级菜单
09-09
vue-element-admin是一个基于Vue.js和Element UI的前端框架，可以用于快速开发管理系统界面。在该框架中，三级菜单是指页面只对应三级菜单，没有二级菜单的页面。通过引用的描述，可以看出vue-element-admin可以实现三级菜单的布局。 另外，根据引用的描述，多级菜单的实现原理类似，需要注意四级菜单的第二级和第三级需要链接到index.vue中。这意味着在vue-element-admin框架中，可以通过配置路由和组件的方式实现多级菜单。 对于需求中提到的二级菜单和三级菜单的显示方式，引用中描述了顶部菜单栏后，生产管理模块对应的二级菜单是横向显示的，但需求是希望二级菜单和三级菜单是纵向显示的。在vue-element-admin框架中，可以通过自定义样式或修改布局组件来实现二级菜单和三级菜单的纵向显示。 综上所述，vue-element-admin框架可以实现三级菜单，并且可以通过配置路由和组件来实现多级菜单。同时，可以通过自定义样式或修改布局组件来实现二级菜单和三级菜单的纵向显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值