Vue Router 动态路由(组件)踩坑日记

263 阅读1分钟

解决方法:

更详细代码参考 gitee.com/mayanze123/…

属性部分解决前:

component: () => import('@/views/' + menu.url),

属性部分解决后:

component(resolve) { require(['@/views/' + menu.url], resolve) },

完整代码截图:

image.png

变量部分:

image.png tmpc.component = resolve => require.ensure([], () => resolve(require('@/views/' + child.url)))

前因后果:

起因是这样的,我准备自己写个项目前端采用的是 PanJiaChen 大神的开源框架 vue-element-admin,菜单部分想换做我自己的后端数据库菜单,然后就按照现有路由拿后台数据组装路由,结果发现怎么搞都不行。。。

经过无数次想把键盘打碎,最后一点理性告诉我,那样做解决不了问题的两天后,一个突发奇想,把动态部分

component: () => import('@/views/' + menu.url),
改为
component: () => import('@/views/house/index')

之后,竟然好了,我去,经过网上查询资料后发现,这种方式不允许使用变量(小白一个,大神勿怪),但是问题来了,既然是数据库拿的数据组装,那变量这一部分无法避免的,经过网上各种方式试用后,找到了解决办法,就是上面解决方法