VUE开发动态菜单的踩坑记录(前后端分离,前端VUE+后端tp6)
程序员文章站
2024-03-25 11:19:58
...
最近在做一个前后端分离的项目,要求是前端的左侧菜单需要根据不同角色来自动匹配,参考了一些大神的代码,最终也成功实现了该功能,但是在实现过程中遇到了一些问题,卡了两天都没解决,特在此记录一下,以便给遇到同样的同学一些参考!
1.不同角色登录后,路由不刷新的问题
遇到该问题时,按F5重新加载一次可以解决,也有网友建议登出后调用一下window.location.reload(),这样做是可以,但体验感觉不是很好。经过仔细研究,发现问题出在动态匹配路由时,调用函数后会自动修改原值(传值和引用传值问题),而原值只有在刷新页面时才会加载一次...
2.函数传值和传引用的问题
如图所示,函数recursionRouter有两个参数,permissionList是api传回router,dynamicRouter写在router文件中,调用该方法后dynamicRouter被修改了(传引用问题),所以退出后登录其它角色时,传的参数dynamicRouter是修改后的值,导致匹配的路由不正确,必须重新刷新(F5)一次页面才OK,要解决该问题可以看第3点
3.深拷贝,深克隆
如第二点,在每次调用recursionRouter时如果把dynamicRouter克隆一下,这样就不会改到原值,问题也就解决了,完美!解决方法参考以下代码(来自网络):
// 功能
// 深拷贝
const clone = (obj) => {
var o;
// 如果 他是对象object的话 , 因为null,object,array 也是'object';
if (typeof obj === 'object') {
// 如果 他是空的话
if (obj === null) {
o = null;
}
else {
// 如果 他是数组arr的话
if (obj instanceof Array) {
o = [];
for (var i = 0, len = obj.length; i < len; i++) {
o.push(clone(obj[ i ]));
}
}
// 如果 他是对象object的话
else {
o = {};
for (var j in obj) {
o[ j ] = clone(obj[ j ]);
}
}
}
}
else {
o = obj;
}
return o;
};
export default clone;
调用方法:
const cloneDynamicRoutes = clone(dynamicRoutes)
routes = recursionRouter(permissionList, cloneDynamicRoutes)
上一篇: Swiper Animate动画