当前位置: 首页 > news >正文

Vue功能菜单的异步加载、动态渲染

        实际的Vue应用中,常常需要提供功能菜单,例如:文件下载、用户注册、数据采集、信息查询等等。每个功能菜单项,对应某个.vue组件。下面的代码,提供了一种独特的异步加载、动态渲染功能菜单的构建方法:

<script setup>
import {defineComponent, getCurrentInstance, h} from 'vue'//定义需要显示的功能菜单项
const menus = [{id: 'home', name: '首\u3000页'},{id: 'user.login', name: '用户登录'},{id: 'user.regist', name: '用户注册'},{id: 'college.list', name: '学院风采'},{id: 'query.student', name: '学生查询'},{id: 'enroll.chart', name: '招生一览'},{id: 'upload.docs', name: '资料上传'},{id: 'chat.room', name: '畅论空间'}
]
const app = getCurrentInstance().appContext.app                        //当前Vue应用
//异步加载.vue组件并注册
Promise.all( menus.map(({id}) => id === 'home' ?{__name: id, setup: null, render: null} : import(`./modules/${id}.vue`))
).then(modules => modules.forEach(m => app.component(m.__name, m)))    //注册组件
const store = app.config.globalProperties.$pinia._s.get('loginer')     //状态管理数据
//动态渲染功能菜单项
const AppMenu = defineComponent({              //定义功能菜单组件render() {return h('div', {class: 'home-menu'},h('ul', {class: 'home-ul'},    //用无序列表构建菜单项menus.map(({id, name}) =>h('li', {              //无序列表的列表项,对应功能菜单项id: id,              //模块idinnerText: name,     //菜单名onClick: event => store.setModule(event.target.id) //加载模块}))))}
})
</script><template><app-menu></app-menu>
</template>

         上述处理,需要细细琢磨。提示:.vue组件解析、编译后的基本构成要素为:{__name: '组件id', setup: {组合式函数}, render: {渲染函数}}。需要充分认识这一特点,才能更好地理解上述处理方法。

        该方法的应用实战,请参阅:响应式项目(RxJS+Vue.js+Spring)大决战(5):主页的实现(前端视图模块)


http://www.mrgr.cn/news/70809.html

相关文章:

  • 【go从零单排】XML序列化和反序列化
  • 【系统设计】理解带宽延迟积(BDP)、吞吐量、延时(RTT)与TCP发送窗口的关系:优化网络性能的关键
  • 通过MT4调用Windows API进行文件读写操作
  • 瞧瞧别人家的异常处理,那叫一个优雅!
  • 使用高斯差分DOG(Difference of Gaussians)检测图像中的斑点或者边缘
  • [Docker#4] 镜像仓库 | 部分常用命令
  • windows C#-默认约定(下)
  • JavaWeb——Web入门(8/9)- Tomcat:基本使用(下载与安装、目录结构介绍、启动与关闭、可能出现的问题及解决方案、总结)
  • Pure Adminrelease(水滴框架配置)
  • python-27-Python ORM系列之彻底搞明白ORM概念,对ORM进行封装结合FastAPI实现数据库的增删改查,联表查询等接口
  • C++学习笔记----11、模块、头文件及各种主题(二)---- 函数模板(2)
  • VirtIO实现原理(2)
  • Python酷库之旅-第三方库Pandas(207)
  • 金山云C++面试题及参考答案
  • Python学习:scipy是什么?
  • 关于cloacked-pixel-master在kali上的安装
  • C++线程
  • Java期末复习暨学校第四次上机课作业
  • 【含文档】基于ssm+jsp的校园疫情管理系统(含源码+数据库+lw)
  • NLP论文速读(NeurIPS2024)|使用视觉增强的提示来增强视觉推理
  • SQLite Where 子句
  • 从2D到3D:MoGe——微软的单目3D几何重建模型
  • Python CSV文件列合并实战:从基础到进阶
  • [数组二分查找] 0374. 猜数字大小
  • 知名开源项目官宣停更,太痛了!
  • (66)RLS均衡器和LMS均衡器作用于通过频率选择性衰落信道的16-QAM信号的性能对比MATLAB仿真