【项目复盘-vue2.0】router.addRoutes 报错TypeError: routes.forEach is not a function

做动态路由时,使用router.addRoutes报错

原来的写法:

      const menuArray = []

      menu.forEach(item => {
        // 这里拿到的menu就是permission下面的数组,既有一级菜单也有二级菜单,需要做一个区分
        if(item.children) { // 如果它有children,继续进行遍历(二级菜单)
          item.children = item.children.map(item => {
              // 添加component属性。动态路由必须具备的三个条件:path,name(非必选),component
              // 根据permission下menu的url找到对应的组件路径
            item.component = () => import(`../views/${item.url}`) //es6模板字符串语法
            console.log(item.component,'item')
            return item // 此时children对象已被更新
          })
          menuArray.push(...item.children)
        
        } else { // 如果是一级菜单的话,直接为它添加component属性
          item.component = () => import(`../views/${item.url}`) //es6模板字符串语法
          menuArray.push(item)
        }
      })
      router.addRoutes(menuArray)
    }

后面报错 TypeError: routes.forEach is not a function

找到的一丝线索:链接下方的评论

vue.js 每次使用router.addRoutes 报错TypeError: routes.forEach is not a function 什么情况-前端-CSDN问答

router.addRoute里面的参数必须是一个数组,其次,数组里面有路由映射

改良后:

参照的是下面链接博主的写法

Vue实现动态路由(后台管理系统案例)_进阶的巨人001的博客-CSDN博客

注意追踪currentMenu

    addMenu(state,router) { // 做路由的动态添加
      // 如果cookie中没有menu数据,就直接进行return
      if(!Cookie.get('menu')) {
        return
      }
      // 如果当前有menu数据
      const menu = JSON.parse(Cookie.get('menu')) // 将menu数据转成对象,拿到之前序列化的menu数据
      state.menu = menu
      let currentMenu = [
        {
          path: '/',
          component: () => import('../views/Main'),
          children: []
        }
      ]
      // 拿到menu数据进行遍历
      menu.forEach(item => {
        // 这里拿到的menu就是permission下面的数组,既有一级菜单也有二级菜单,需要做一个区分
        if(item.children) { // 如果它有children,继续进行遍历(二级菜单)
          item.children = item.children.map(item => {
              // 添加component属性。动态路由必须具备的三个条件:path,name(非必选),component
              // 根据permission下menu的url找到对应的组件路径
            item.component = () => import(`../views/${item.url}`) //es6模板字符串语法
            console.log(item.component,'item')
            return item // 此时children对象已被更新
          })
          currentMenu[0].children.push(...item.children)
          console.log(currentMenu,'haschild')
          // menuArray.push(...item.children) // es6语法 将item.children解构 ...扩展符
        } else { // 如果是一级菜单的话,直接为它添加component属性
          item.component = () => import(`../views/${item.url}`) //es6模板字符串语法
          // menuArray.push(item) //这里的menuArray存入的就是一级菜单的路由文件
          currentMenu[0].children.push(item)
          console.log(currentMenu,'nochild')
        }
      })
      router.addRoutes(currentMenu)
    }

猜你喜欢

转载自blog.csdn.net/Weiqian_/article/details/126115982