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

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

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)