踩坑：解决：ant-design管理系统布局，左侧使用a-menu菜单时，每次刷新，菜单丢失状态，跳转到首页

已于 2023-08-24 15:53:47 修改
阅读量717 收藏
点赞数 1
分类专栏： vue3 文章标签： 前端
于 2023-08-24 15:13:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45495316/article/details/132474817
版权

找了好几篇文章，但是属性和新的ant-design属性都不一样，特此记录一下！

html

script

 属性说明：

selectedKeys：菜单每次选中的属性，存储当前的router.path

openkeys：打开的a-sub-menu，创建路由时，meta对象中存储module: "服务资源"，使用时读取

效果：刷新后停留在当前menu

夜半听雨♞
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AntAdmin:使用vue ant-design-vue编写的后台管理系统
03-11
蚂蚁管理员 使用vue + ant-design-vue开发的后台管理系统，部分组件使用Element-ui组件，目前只做主流浏览器兼容，遇到错误属于正常现象。 此项目只作练习，如若滥用请联系微信：UT77243我会第一时间删除整个项目 本项目由开发，您可以随意修改，使用！！ 简述功能： 登录，退出 文章管理 文章修改，删除 添加文章 笔记管理 笔记添加 笔记修改，删除 标签管理 标签添加 标签修改，删除 项目管理 项目添加 项目修改，删除 友链中心 友链添加 友链修改，删除 个人中心 个人账户动态展示 账户安全 颜色主题 如何安装与使用 git clone git@github.com:Wlisfes/AntAdmin.git cd AndAdmin npm install 安装依赖 npm start 运行 npm run build 打包 技术栈 Vue-Cli（
ant-design-pro-plus：:sparkles:基于ant-design-pro做一些微小的工作
02-05
Ant Design Pro Plus 官方说明请参见 原仓库名称ant design pro v2 plus ，代码移到分支 。重命名为ant design pro plus后，在master分支跟进ant design pro中的更新。 注意：预览由于是部署到Github Pages，配置了 ，故无法使用形如/result/:id的动态isProductionEnv 。又通过isProductionEnv变量避免登录逻辑等问题，如果有接口报错可忽略，重点是标签页功能_（：з''∠）_ :sparkles:新增特性 基于路由实现标签页切换 两种标签页模式任选 基于路由，每个路由只渲染一个标签页 根据路由参数
Python私教张大鹏 Vue3整合AntDesignVue之Menu 导航菜单
最新发布
Python私教
06-11 616
何时使用 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。 更多布局和导航的使用可以参考：通用布局。 开发者注意事项 Menu 元素为 ul，因而仅支持 li 以及 script-supporting 子元素。因而你的子节点元素应该都在 Menu.Item 内使用。 Menu 需要计算节点结构，因而其子元素仅支持 Menu.* 以及对此进行封装的 HOC 组件。 必须为 SubMenu 设置唯
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
主要介绍了antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ant-design-vue中使用a-menu刷新页面后菜单仍选中高亮
csdnyp的博客
07-07 4918
ant-design-vue中使用a-menu刷新页面后菜单仍选中高亮
react17+antd4 Menu 点击菜单收起其他展开的所有菜单、页面刷新时设置菜单的选中状态和展开状态
weixin_45871977的博客
04-12 1613
react17+antd4 实现①点击菜单收起其他展开的所有菜单；②页面刷新时保持页面对应的菜单高亮，对应的二级路由展开，确保菜单状态与当前页面匹配。
vue动态路由及 antDesignVue a-menu菜单
weixin_41977129的博客
07-25 1386
如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。入口：main.js 引入的router.js。用户登录之后，获取动态路由。
vue后台系统侧边导航跳转页面
Xiang_Gong_Ya_的博客
06-09 632
vue后台系统侧边导航跳转页面 定义路由数组套json 导出路由数组 export { routes，router } 在主体内容区使用solt <!-- 子组件中的 <slot>就是一个槽，可以接收父组件传过来的模板内容template， <slot> 元素自身将被替换 --> <slot></slot> 获取点击的导航的下标传入参数获取指定路由的path跳转页面 <a-menu-item
Nuxt - Ant Design Vue 组件库 Munu 导航菜单 ＜a-menu＞ 配合路由使用教程，点击菜单跳转到对应路由（刷新或切换页面后，自动选中高亮对应到当前菜单上）超详细教程
王佳斌
09-04 6031
Nuxt - Ant Design Vue 组件库 Munu 导航菜单 a-menu a-menu-item 配合路由使用教程点击菜单跳转到对应路由刷新或切换页面后自动高亮对应到当前菜单上超详细教程vue.js nuxt.js 菜单怎么对应路由自己选中子菜单二三级路由示例仓库后台管理系统界面栏目ant-design-vue导航菜单a-menu的详细使用导航菜单路由与选中菜单对应。
a-menu菜单路由跳转，进入下个页面的高德地图上有上个页面的覆盖物底框遮挡
花椒和蕊的博客
10-28 526
问题描述：这是两个页面的两个不同的高德地图，通过左侧菜单的路由跳转，每次点击切换的时候，就会出现上个页面的覆盖物底框在第二个页面出现 如下图，点击切换的时候变成这样了 一开始想的是怎么在点击的时候清除上个页面的覆盖物，也搜了map.clearmap()方法，但是不起效果。 我研究了其他的地图，都没有这种情况，这个时候刚好控制台是打开的，我查看element元素发现类名是一样的，就是在添加覆盖物的时候，我这两个页面的类名是一样的，也是偷懒，直接复制过来就用，我把类名改成不一样的之后，每次点击都不会再出现
ant-design-vue导航菜单a-menu的详细使用
热门推荐
weixin_43242112的博客
07-27 3万+
ant-design-vue导航菜单a-menu的详细使用一、递归生成菜单二级目录三级目录 一、递归生成菜单 此处强调一点，如果是一级以及二级菜单的生成，普通的两层for循环结合递归以及v-if生成即可。如果是想使用a-menu生成三级或者三级以上的菜单，那么就需要定义在单文件内定义函数式组件。那为什么不推荐单文件的形式定义组件，而是使用函数式组件？以下是官方文档的说明： 二级目录 三级目录 ...
antd v5 pro 项目登录页面刷新后登录成功跳转失败
gaoxiaofei520sss的博客
05-22 699
问题出在这，该方法，之前登录返回为undefined。之前版本没有这个问题，升级后出现。只有第一次、或者关闭浏览器重新打开时点击登录，才可以进入。点击浏览器刷新，登录成功，跳转为当前页面。这个问题很好解决，直接答应对应的数据，发现login.tsx，存储数据的格式和之前不一致，显示有误，做相应修改即可。第一步，显示登录成功，但跳转失败，说明await fetchUserInfo()有问题。第三步,排查app.tsx getInitialState方法。发现为undefined。第二步,打印初始化数据。
使用router-link跳转子页面之后，菜单激活样式不生效的解决
qq_49074952的博客
08-10 835
使用router-link跳转子页面之后，菜单激活样式不生效的解决
antd design 刷新后导航菜单与当前页面保持同步
weixin_45093753的博客
10-14 593
antd design 刷新后导航菜单与当前页面保持同步
antd vue 刷新保留当前页面路由，保留选中菜单，保留menu选中
Yangliwei的博客
06-19 7742
废话不说，上代码！ <a-menu theme="dark" mode="inline" :selectedKeys="[$route.path]"> <a-menu-item :key="'/home'"> <router-link to="home"> <a-icon type...
antd-vue a-menu菜单绑定路由相关问题
weixin_45259917的博客
09-06 8161
antd-vue a-menu菜单绑定路由相关问题 tips: 路由绑定、菜单跳转、网页后退高亮显示 1. 问题描述 使用antd-vue 的 a-layout布局和a-menu菜单做一个侧边栏菜单，加入vuex配置侧边栏点击事件，实现点击菜单改变路由展示中间部分内容的功能 但是出现了问题： 重复点击路由报错 浏览器刷新/后退 菜单高亮区域没有根据路由的变化产生变化 2. 解决方法 对路由变化进行判断/修改router 的push与replace方法 借助a-me
vue项目：使用ElementUI中的el-menu导航栏实现路由跳转，页面切换
weixin_52950296的博客
06-09 1万+
vue+elementUI 简单菜单跳转
vue右键在新标签页中打开链接（a标签跳转路由）
MISS_zhang_0110的博客
02-18 4432
ue右键在新标签页中打开链接（a标签跳转路由）一、代码 主要是通过a标签的href进行路由的跳转实现的 一、代码 <el-menu :default-active="defaultActive" class="menu-box" @select="handleSelect" :default-openeds="openeds" :collapse="isCollapse"
ant-design-vue如何处理点击菜单时路由跳转
05-24
在 ant-design-vue 中，点击菜单时路由跳转可以通过以下步骤进行处理： 1. 在路由配置中定义需要跳转的路由，例如： ```javascript const routes = [ { path: '/dashboard', name: 'Dashboard', component: Dashboard, }, { path: '/settings', name: 'Settings', component: Settings, } ]; ``` 2. 在菜单组件中使用 `a-menu-item` 和 `router-link` 组件来实现菜单项的点击事件和路由跳转，例如： ```html <a-menu-item key="/dashboard"> <router-link to="/dashboard"> <span> <a-icon type="dashboard" /> <span>Dashboard</span> </span> </router-link> </a-menu-item> <a-menu-item key="/settings"> <router-link to="/settings"> <span> <a-icon type="setting" /> <span>Settings</span> </span> </router-link> </a-menu-item> ``` 这样，当用户点击菜单项时，就会触发路由跳转到对应的页面。注意，在使用 `router-link` 组件时，需要将其包裹在 `a-menu-item` 组件中，同时设置 `key` 属性来标识菜单项的唯一性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值