实际的Vue应用中,常常需要提供功能菜单,例如:文件下载、用户注册、数据采集、信息查询等等。每个功能菜单项,对应某个.vue组件。下面的代码,提供了一种独特的异步加载、动态渲染功能菜单的构建方法:
<script setup>
import {defineComponent, getCurrentInstance, h} from 'vue'
const menus = [
{id: 'home', name: '首\u3000页'},
{id: 'login.index', name: '用户登录'},
{id: 'regist.index', name: '用户注册'},
{id: 'college.index', name: '学院风采'},
{id: 'query.index', name: '学生查询'},
{id: 'enroll.index', name: '招生一览'},
{id: 'upload.index', name: '资料上传'},
{id: 'chat.index', name: '畅论空间'}
]
const app = getCurrentInstance().appContext.app
//异步加载.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: {渲染函数}}。需要充分认识这一特点,才能更好地理解上述处理方法。
标签:异步,Vue,const,name,index,vue,菜单,id From: https://blog.csdn.net/acoease/article/details/143640024