
通常我们比较常用的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有哪里写的不好或者想讨论的可以在下方 评论区跟我讨论噢
博客主要围绕根据后台菜单配置动态生成Vue路由展开。常用的import引入组件方式不支持动态变量,无法正确找到路由。可采用require(AMD版本)方式,定义loadComponent函数处理后台返回内容并赋值给component,改造后Vue路由可完全由后台控制。
2841

被折叠的 条评论
为什么被折叠?



