管理端根据角色，获取动态路由，动态引用页面的时候，Vue2和vue3的使用方法

1、vue2 使用的方法，重点注意引用组件的时候使用的require
let temp=[];
children.map((itemChild)=>{
let visible=(itemChild.menuType=='F')?true:false;
temp.push({
path: itemChild.path,
component:resolve => require([@/views/${itemChild.component}], resolve),
meta: { title: itemChild.menuName,parentMenuName:item.menuName, affix: true },
hidden:visible
})
})
routes.push({
path: item.path,
component: Layout,
redirect: children[0].path,
alwaysShow: true, // will always show the root menu
meta:{
title:item.menuName,
icon: item.icon
},
children: temp
})
2、vue3使用的方法 注意loadFile方法
async function loadFile(item: any) {
// if (item.type === 4) return import('@/views/iframe.vue')
let fileModule = await import('@/views' + item.url)
.catch((err) => {
// console.error(err);
return false
})
if (!fileModule) {
fileModule = import('@/views/develop.vue')
console.error('文件不存在或者文件加载出现错误');
}
return fileModule
}
var route = {
name: item.name,
path: item.url,
component: () => loadFile(item),
meta: {
id: item.id,
url: item.url,
title: item.name,
requiresAuth: true,
rootMenu: item.rootMenu,
keepAlive: true
},
}
routes.push(route)