vue动态菜单踩的坑

最新推荐文章于 2025-10-29 22:20:47 发布
原创 最新推荐文章于 2025-10-29 22:20:47 发布 · 873 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue spring boot

本文探讨了前端路由设置中需要注意的问题，包括在添加新路由前需重置旧路由以避免重复，404路由应动态加载以解决刷新后登录失败的常见问题，以及强调后台传递的数据必须与前端路由配置保持一致，否则可能导致404错误。通过理解这些关键点，可以优化前端应用的路由管理和错误处理机制。

1.添加路由之前需要重置之前的路由否则会重复

在这里插入图片描述

2.404路由需要动态加载，否则刷新登录经常出这个

在这里插入图片描述

3.后台传的值一定要跟前台路由表格式一致，不一致也可能会导致404

在这里插入图片描述

在这里插入图片描述

vue项目做菜单权限时动态路由出现死循环的问题以及刷新页面store数据丢失页面空白问题
qq_37635012的博客
11-10 2792
vue动态路由
vue 动态菜单 刷新空白 解决方案
guanzhangl的博客
01-10 3614
1.先确认自己在route.js 或者 main.js 中有没有使用 路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新，重新根据后台返回数据生成动态路由，就像你在登陆时做的事情一样。 代码示范注意点： //注意：确定自己避免了路由守卫进入死循环 let oneRun = true; //通过oneRun变量控制 避免陷入死循环 router.befor...
jeecgboot环境搭建流程以及存在的问题
m0_58433070的博客
06-10 1133
"set name hello"设置name的值为hello，然后执行"get name"获取nam的值，keys * 是匹配当前数据库中所有的key。3.mysql环境搭建https://blog.youkuaiyun.com/qq_44529550/article/details/125974680。7.前端运行，找到package.json右键找到show npm Scripts右击运行pre,运行成功后右击运行serve.卸载服务：redis-server --service-uninstall。
Vue2 导航故障解决方案及 Vue3 拓展
m0_57836225的博客
10-04 538
例如，在一个示例中，进入小米商城后，有一个一级路由叫 “西索 search”，搜索电脑会到 “search list” 路由上，当再次搜索手机时，会发现路径没有变只是参数变了，这就是当前页跳当前页。解决这个问题的方法比较简单，重写 router 的 push 方法或者 replace 方法，并重点加上 catch，这样可以捕获异常，抑制错误。总之，无论是 Vue2 还是 Vue3，对于导航故障问题都有相应的解决方案，开发者可以根据实际情况进行选择和应用，以提升用户体验和开发效率。
vue动态生成路由及常见问题
Zichen_Lin的博客
10-16 4270
在一些常见的 RBAC 系统中，对于角色和权限的管理是极其重要的。一个人可以拥有多个`角色`，而一个角色又会被赋予多个`权限`。不同的角色在登录后台系统后，看到的系统菜单也是不同的。在前后端不分离的项目中，后端可以整合 `Spring Security`、`Shiro`等安全框架对页面元素进行标签化管理。但是随着前后分离模式的普及，我们现常常把展示逻辑放到前端来完成。本文就详细聊一聊在 vue 中如何实现对于菜单的动态控制。
Vue在页面右上角实现可悬浮/隐藏的系统菜单
01-21
作为一个jQuery前端攻城狮实现这个功能可以说是很easy了，但是对只刚粗看了一遍vue文档的菜鸟来说，坑还是要亲自踩过才算圆满。 知识点 组件及组件间通信 计算属性 正文 1. 父组件 这里暂时只涉及系统菜单这一个...
vue左侧菜单,树形图递归实现代码
01-19
学习vue有一段时间了，最近使用vue做了一套后台管理系统，左侧菜单需求是这样的，可以多层，数据由后台传递。也因为自己对官方文档的不熟悉使得自己踩了不少坑，今天写出来和大家一起分享。 效果图如下所示： 先...
vue——二级菜单demo
qq_41261490的博客
05-22 3976
学习了vue，最近想着写一写demo练一练，今天写的二级菜单，中间踩过很多坑 1、存数据：最开始想着一级菜单存一个数组，二级菜单存不同的数组。那么问题来了，一级菜单和二级菜单应该是超级相关联的，如果分开存储再去建立关系很麻烦，所以存在一个数组对象中，那么也就是说，不管多少级菜单都可以这样，又方便还不需要我们自己去建立相关关系。 2、‘^’ 的变化，最开始想着不同状态用v-show去操作dom...
vue + electron实现浏览器ctrl f踩过的坑
weixin_41843107的博客
04-18 1170
可以在此目录\win-unpacked\resources\app查看打包后的文件和dist相同；icon: “./build/logo.ico”, // exe图标 ico要求256。asar: false, //打包时不进行加密。preload.js文件内容。
快速入门Vue3，插值、动态绑定和避坑技巧你都搞懂了吗？
最新发布
https://blog.cmdragon.cn/
10-29 632
Vue的模板语法是基于HTML的声明式语法，它允许你在HTML中嵌入Vue的特殊标记（如插值、指令），将响应式数据与DOM绑定。Vue会将模板编译为渲染函数，最终生成真实DOM并实现“数据变化→页面自动更新”的响应式效果。简单来说，模板是“带Vue语法的HTML”，比如：</这里的是文本插值，Vue会把data中的message值替换到此处。
记一个问题：Vue3菜单展开卡死 的坎坷解决过程
cyh5d的博客
05-08 1960
最近在做低代码平台的重构解耦合，用到webpack5的模块联邦ModuleFederation，所以需要升级webpack和vue-cli，连同其他一些库也一并做了升级（重构前也是用的Vue3，从3.1.7–3.2.13，antd-vue从2.2.7–3）。重构升级之前没问题，重构后本地开发环境也没问题，但是发到了线上发现点击左边菜单栏时会直接卡死（如下图），CPU直接飙到100%+，只能强制关闭浏览器。以下是整个事情的解决过程： 线上环境引用了远端mf提供的组件库，但是部分资源（如字体文件）存在了跨
vue3常见错误及解决办法全解析
L1ke_one的博客
03-23 5286
1. 错误位置： 错误原因： 第24行5列出现错误，缺少>符号 2. 报错位置： 报错原因： 在代码31行6列中缺少结束标签 3. 在代码65行2列中 onMounted未定义，说明onMounted没有引用，也有可能单词写错 4. 在代码5行3列出，有多余空格，一般只在严格模式中会展示此错误 使用ctrl+K格式化文档就可以解决该错误。 5. 在代码第10行的19-57个字符中存在错误 错误原因：模块找不到，不能resolve 解决办法：检查...
vue form登录需要点击两次问题
u011225228的博客
07-03 6079
问题描述：在做登录页面时，使用Form和submit，和reset，因为可以自动添加回车登录事件和置空功能，很方便。但是也遇到了问题。第一次点击登录按钮时，并没有执行 submit的click事件，而是在地址栏中添加了一个问号，并且刷新页面。第二次点击登录时才执行click。可能原因：form中的submit带有默认的提交和跳转动作，在点击submit时，执行的时默认的提交和跳转解决方案：给sub...
vue2项目升级vue3项目所遇到的问题及解决办法
qq_57558631的博客
05-16 5130
第一次 1.v-model => v-model:value 2.生命周期：beforeDestroy => beforeUnmount destroyed => unmounted 3.事件API :this.$emit('') => $emit(this,'') 子组件触发事件写入选项中 4.() => import('') 转化 Vue.defineAsyncComponent(() => import('')) 5.插槽solt-sc
vue router 动态菜单实现问题汇总
忙碌的菠萝
11-24 837
vue router 动态菜单实现问题 问题一：刷新页面router丢失 动态路由页面刷新时显示undefine，实际是未找到路由 问题分析 刷新页面会导致动态加载的router数据被清理，我们只在登录的时候加载路由是不行的，后续刷新这个路由就没有地方可以重新加载了，所以直接访问就直接undefine了。 问题解决 这个开始我尝试的思路也有几个： 1、刷新问题，会将store中的数据刷新掉，但localstorage和sessionStorage中的数据不会刷新掉，可以将菜单放到这两个里面。这个方案也是可行
vue动态菜单，根据登录用户权限返回不同菜单，登录完成跳转到不同的首页
qq_41920758的博客
04-16 4186
1、动态菜单，前提是根据后端返回的不同菜单，展示给不同的人，路由一定要和菜单返回的URL保持一致， 2、前提是，路由中不要写死redirect到某一个指定 文件，因为登录的用户不一定有这个权限 3、流程 （1）路由配法 新建一个位于view文件夹下的index.vue用来进行路由分发 路由文件中新建一个路由，当 / 时重定向到 /root ，/root即引用的上面创建的index.vue文件 （2）index.vue文件做路由分发 getloginlist()方法为获取登录用户有权限的菜单，返回的菜单t
vue系统管理的左侧菜单，部分菜单需要登录内部账户才能进入
weixin_42066070的博客
05-13 552
需求分析：点击左侧的菜单，弹出提示请登录账户，才能办理业务，然后直接进入到用户的登录页面，登录页面后不用先进首页，而是直接进入到点击的页面。 代码实现： 1、登录的时候记录用户的信息，比如用户名 2、路由守卫 3、跳转到登录页面的时候，根据参数跳转到点击的页面 实现1步骤的代码 // 用户密码登录 pwdLogin() { this.$refs["pwdLoginForm"].validate((valid) => { //校验通过 ...
简约至上，Vue圆环菜单组件
大灰狼的小绵羊哥哥的博客
01-16 8497
VueCircleMenu https://github.com/OYsun/VueCircleMenu?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io API Props 参数 类型 说明 type String 必填项,指明菜单的类型,有6种：top,bot
vue动态添加路由之避坑指南
weixin_47180815的博客
03-09 2369
你是否遇到了： addRouter后出现白屏 路由守卫出现死循环 踩了很多坑之后，我终于悟到了vue动态添加路由的正确打开方式； 为了设计权限，在前端我们通常采取两种方式 1、在用户登录时获取该用户权限下的路由表，动态生成路由和菜单栏（后端给定路由） 2、在用户登录时获取用户权限，根据权限筛选出需要的路由（前端通过权限筛选路由） 本篇文章采用方式一 关键点： 使用route中addRouter方法动态添加路由 将路由分为 （1）动态路由 myRouterObj （可从后端获取） （2） 静态路由 st
VUE动态菜单权限管理系统的实现
在本文中，我们将详细探讨“VUE角色权限用户菜单模块前后台”这一项目所涉及的关键知识点，该项目的核心是基于Vue.js框架实现用户角色与权限的管理，以及动态菜单的生成。 ### Vue.js框架基础 Vue.js是一个用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值