vue2和vue3动态引入路由，权限控制

后端返回的路由结构(具体路由可以本地模拟)

// 此路由自己本地模拟即可
const menus = [{"title": "动态路由","meta": "{\"title\":\"动态路由\",\"noCache\":true}","component": "/test/test.vue","name": "test","path": "/test"
}]

1、vue2 

export const loadView = (view) => {// 此处是在views下创建一个文件夹test，文件夹下有一个test.vue文件的结构return (resolve) => require([`@/views${view}`], resolve)
}menus.forEch(v=>v.component = loadView(path)) //此处就是动态引入路由const router = new Router({scrollBehavior: () => ({ y: 0 }),routes: []
})router.addRoutes(menus)

2、vue3

const modules = import.meta.glob('@/views/**/*.vue')
menus.forEch(v=>v.component = modules[`/src/views${v.component}`]) //此处就是动态引入路由
const router = new Router({scrollBehavior: () => ({ y: 0 }),routes: []
})
router.addRoute(menus)

这个动态路由会有很多易错点：

（1）项目是否有支持@根目录路径（根据项目具体自己调整）

（2）.vue后缀，根据自己的实际路径做调整，发现问题的时候一步一步打印日志排查

（3）views下的层级关系，此案例是在views下创建了一个文件夹test，在test文件夹下创建test.vue文件

总结（必看）

自行可拓展根据标识动态引入，很多人其实都是卡在如何动态引入组件这一步，以为用import就能动态引入，其实是错误的，因为动态路径解析: 使用 import() 时，路径解析是静态的，只能针对具体文件执行一次导入操作。而批量加载: import.meta.glob() 支持通配符路径匹配，可以一次性获取多个模块并按需加载，vue2和vue3的引入方式会有点小区别