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

博客主要围绕根据后台菜单配置动态生成Vue路由展开。常用的import引入组件方式不支持动态变量,无法正确找到路由。可采用require(AMD版本)方式,定义loadComponent函数处理后台返回内容并赋值给component,改造后Vue路由可完全由后台控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

v2-cf23526f451784ff137f161b8fe18d5a_1440w.jpg?source=172ae18b

通常我们比较常用的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路由可以完全的通过后台进行控制, 如: 公用组件的参数设置、动态设置按钮关联组件等等

v2-a78dcde79adc4bcf961244649d40d803_b.jpg

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

getComponents

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值