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

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

javascript 复制代码
<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,              //模块id
                          innerText: name,     //菜单名
                          onClick: event => store.setModule(event.target.id) //加载模块
                }))
        ))
  }
})
</script>

<template>
  <app-menu></app-menu>
</template>

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

相关推荐
Canace3 分钟前
浏览器渲染原理概述
前端·性能优化·浏览器
啃火龙果的兔子10 分钟前
前端八股文性能调优篇
前端·前端框架
JarvanMo14 分钟前
停止与 Compose 导航作斗争(这 5 个技巧将改变一切)
前端
trsoliu24 分钟前
前端周刊第437期:AI编程助手、WebGPU实战与React生态新动态
前端
AnalogElectronic28 分钟前
vue3 实现贪吃蛇 电脑版01
javascript·vue.js·ecmascript
trsoliu29 分钟前
2025年Web前端前沿技术动态:WebGL动画、CSS View Transitions与HTML隐藏API
前端·javascript·css
trsoliu32 分钟前
2025年Web前端最新趋势:React基金会成立、AI编码助手崛起与Astro极速搜索
前端·javascript·react.js
一 乐35 分钟前
商城推荐系统|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·商城推荐系统
亿元程序员41 分钟前
为什么游戏公司现在都喜欢用protobuf?
前端
鹏多多43 分钟前
React瀑布流Masonry-Layout插件全方位指南:从基础到进阶实践
前端·javascript·react.js