antdesign vue 2.0 递归菜单_Vue 动态生成路由结构

通常我们比较常用的vue组件加载方式就是通过import引入文件，如：路由懒加载 、静态的import。

一般情况下还是推荐使用import方式引入的，因为这更容易从Tree_shaking 及一些分析工具中受益。

在一些比较特殊的场景，比如：

需要根据后台的菜单配置, 动态生成Vue路由。

假如后台返回了以下JSON数据结构

[
    

一般vue路由会类似这样定义

{
    

从JSON数据结构转换到vue路由定义，我们只需要进行递归处理就好 。

但这里面我们需要重点关注 component的实现

component:()=>import('@/views/redirect/index'), 

假如我们继续通过import 引入组件的方式，在我们进行递归处理进行动态赋值时，比如

component:()=>import('@/views/' + path ), 

会发现 import 其实是不支持动态变量的，所以我们通过这种方式是无法正确找到路由的

---

require(AMD版本)

针对上面使用 import 出现无法正确找到路由的情况，我们可以通过这种方式处理。

定义loadComponent函数，将后台返回内容处理后, 再赋值给 component

const 

假如想加载不同文件夹下的vue文件， 我们需要声明文件目录的前缀, 不然也会报错的

export 

通过这种方式改造后，Vue路由可以完全的通过后台进行控制, 如： 公用组件的参数设置、动态设置按钮关联组件等等

假如想通过某个按钮点击后加载某个vue组件, 可以封装上面的方法, 大致如下

getComponents

有哪里写的不好或者想讨论的可以在下方 评论区跟我讨论噢