欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VUE开发动态菜单的踩坑记录(前后端分离,前端VUE+后端tp6)

程序员文章站 2024-03-25 11:19:58
...

最近在做一个前后端分离的项目,要求是前端的左侧菜单需要根据不同角色来自动匹配,参考了一些大神的代码,最终也成功实现了该功能,但是在实现过程中遇到了一些问题,卡了两天都没解决,特在此记录一下,以便给遇到同样的同学一些参考!

1.不同角色登录后,路由不刷新的问题

遇到该问题时,按F5重新加载一次可以解决,也有网友建议登出后调用一下window.location.reload(),这样做是可以,但体验感觉不是很好。经过仔细研究,发现问题出在动态匹配路由时,调用函数后会自动修改原值(传值和引用传值问题),而原值只有在刷新页面时才会加载一次...

2.函数传值和传引用的问题

VUE开发动态菜单的踩坑记录(前后端分离,前端VUE+后端tp6)

如图所示,函数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)