做动态路由时,使用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)
}