首页 > 其他分享 >Vue功能菜单的异步加载、动态渲染

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

时间:2024-11-09 12:51:10浏览次数:3  
标签:异步 Vue const name index vue 菜单 id

        实际的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

相关文章

  • Vue3.5新增的baseWatch让watch函数和Vue组件彻底分手
    Vue3.5版本中新增的`baseWatch`函数确实让`watch`函数与Vue组件彻底分手。这一变化的主要目的是使`watch`函数的实现与Vue组件及其生命周期解耦,从而使得`watch`函数更加灵活和独立。具体来说,`baseWatch`函数的引入使得开发者可以在不依赖Vue组件的情况下使用`watch`功能,这为......
  • Vue3 - 详细实现将多个文件批量导出为ZIP压缩包格式并下载功能,vue3将文件批量下载打包
    前言Vue2版本,请访问这篇文章。在vue3|nuxt3项目开发中,详解实现把多个文件组合成一个ZIP压缩包格式下载到用户本地,将文件批量下载打包成zip格式并自定义压缩包命名名称,vue3批量下载文件并导出为压缩包的功能,如何将后端返回的二进制文件流打包成zip格式,支持任意文件......
  • java基于SpringBoot的家电销售管理系统(源码+vue+部署文档+前后端分离等)
    收藏关注不迷路!!......
  • Vue+SpringBoot的民宿预订系统 微信小程序
    关注博主迷路,收藏文章方便后续找到,以防迷路,最下面有联系博主项目介绍微信小程序的民宿预订系统设计的目的是为用户提供民宿客房、公告信息等方面的平台。与PC端应用程序相比,微信小程序的民宿预订系统的设计主要面向于民宿,旨在为管理员和用户、商家提供一个微信小程序的......
  • 基于springboot+vue的医院人力资源管理系统的设计与实现(源码+lw+部署文档+讲解等)
    课题摘要基于springboot+vue的医院人力资源管理系统是一款针对医院人力资源管理需求而设计的高效、便捷的信息化系统。系统涵盖了员工信息管理功能,全面记录医院员工的基本资料,如姓名、性别、年龄、联系方式、身份证号等。同时详细记录员工的学历背景、专业资质、职称......
  • 基于springboot+vue的协同过滤算法的音乐推荐系统设计与实现(源码+lw+部署文档+讲解等
    课题摘要基于springboot+vue的协同过滤算法的音乐推荐系统是一款为音乐爱好者打造的智能推荐平台,同时具备源码、lw、部署文档和讲解。系统中的音乐资源极为丰富,涵盖了各种风格,如流行、摇滚、古典、民谣、爵士、电子等。每首歌曲都有详细的信息,包括歌手、专辑、发行时......
  • Springboot基于Vue的农产品智能交易系统ok45y
    Springboot基于Vue的农产品智能交易系统ok45y本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面 在最后面。系统程序文件列表项目功能:用户,商家,商品分类,农产品信息开题报告内容一、项目背景随着信息技术的飞速发展和互联网的广泛普......
  • 关于vue里的$refs属性
    vuejs的极大程度的帮助减少了对dom的操作,他主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错。this.$refs.xxx为undefined的几种情况记录:1、在created里钩子函数中调用原因:created()在实例创建完成后被立即调用。在这一步,实......
  • vue中页面数据改变组件不重新渲染
    页面中引用组件additional-entrust.vue,当界面传的entrustGold值改变时,组件状态不重新渲染代码如下:<divclass="test"><additional-entrust:entrustFlag="entrustFlag":eachIncrease="auctionData.eachIncrease"......
  • 焕然一新!TinyVue 组件库 UI 大升级,更符合现代的审美!
    你好,我是Kagol,个人公众号:前端开源星球。自从TinyVue组件库去年开源以来,一直有小伙伴反馈我们的UI不够美观,风格陈旧,不太满足现阶段审美。“TinyVue给我的感觉就是一个没啥审美能力、但是很努力的老程序员开发的”看到这个评价,我是哭笑不得,一方面对小伙伴们真诚、友好的......