当前位置: 首页 > 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: {渲染函数}}。需要充分认识这一特点,才能更好地理解上述处理方法。

相关文章:

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

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

云技术基础学习(一)

内容预览 ≧∀≦ゞ 声明导语云技术历史 云服务概述云服务商与部署模式1. 公有云服务商2. 私有云部署3. 混合云模式 云服务分类1. 基础设施即服务&#xff08;IaaS&#xff09;2. 平台即服务&#xff08;PaaS&#xff09;3. 软件即服务&#xff08;SaaS&#xff09; 云架构云架构…...

【优选算法篇】微位至简,数之恢宏——解构 C++ 位运算中的理与美

文章目录 C 位运算详解&#xff1a;基础题解与思维分析前言第一章&#xff1a;位运算基础应用1.1 判断字符是否唯一&#xff08;easy&#xff09;解法&#xff08;位图的思想&#xff09;C 代码实现易错点提示时间复杂度和空间复杂度 1.2 丢失的数字&#xff08;easy&#xff0…...

MFC工控项目实例二十九主对话框调用子对话框设定参数值

在主对话框调用子对话框设定参数值&#xff0c;使用theApp变量实现。 子对话框各参数变量 CString m_strTypeName; CString m_strBrand; CString m_strRemark; double m_edit_min; double m_edit_max; double m_edit_time2; double …...

Java | Leetcode Java题解之第546题移除盒子

题目&#xff1a; 题解&#xff1a; class Solution {int[][][] dp;public int removeBoxes(int[] boxes) {int length boxes.length;dp new int[length][length][length];return calculatePoints(boxes, 0, length - 1, 0);}public int calculatePoints(int[] boxes, int l…...

【前端】Svelte:响应性声明

Svelte 的响应性声明机制简化了动态更新 UI 的过程&#xff0c;让开发者不需要手动追踪数据变化。通过 $ 前缀与响应式声明语法&#xff0c;Svelte 能够自动追踪依赖关系&#xff0c;实现数据变化时的自动重新渲染。在本教程中&#xff0c;我们将详细探讨 Svelte 的响应性声明机…...

PostgreSQL 性能优化全方位指南:深度提升数据库效率

PostgreSQL 性能优化全方位指南&#xff1a;深度提升数据库效率 别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01; 在现代互联网应用中&#xff0c;数据库性能优化是系统优化中至关重要的一环&#xff0c;尤其对于数据密集型和高并发的应用而言&am…...

Flutter鸿蒙next 使用 BLoC 模式进行状态管理详解

1. 引言 在 Flutter 中&#xff0c;随着应用规模的扩大&#xff0c;管理应用中的状态变得越来越复杂。为了处理这种复杂性&#xff0c;许多开发者选择使用不同的状态管理方案。其中&#xff0c;BLoC&#xff08;Business Logic Component&#xff09;模式作为一种流行的状态管…...

Gen-RecSys——一个通过生成和大规模语言模型发展起来的推荐系统

概述 生成模型的进步对推荐系统的发展产生了重大影响。传统的推荐系统是 “狭隘的专家”&#xff0c;只能捕捉特定领域内的用户偏好和项目特征&#xff0c;而现在生成模型增强了这些系统的功能&#xff0c;据报道&#xff0c;其性能优于传统方法。这些模型为推荐的概念和实施带…...

Android 重新定义一个广播修改系统时间,避免系统时间混乱

有时候&#xff0c;搞不懂为什么手机设备无法准确定义系统时间&#xff0c;出现混乱或显示与实际不符&#xff0c;需要重置或重新设定一次才行&#xff0c;也是真的够无语的&#xff01;&#xff01; vendor/mediatek/proprietary/packages/apps/MtkSettings/AndroidManifest.…...

第3章:角色扮演提示-Claude应用开发教程

更多教程&#xff0c;请访问claude应用开发教程 设置 运行以下设置单元以加载您的 API 密钥并建立 get_completion 辅助函数。 !pip install anthropic# Import pythons built-in regular expression library import re import anthropic# Retrieve the API_KEY & MODEL…...

【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit

1.问题描述&#xff1a; 人脸活体检测页面会有声音提示&#xff0c;如何控制声音开关&#xff1f; 解决方案&#xff1a; 活体检测暂无声音控制开关&#xff0c;但可通过其他能力控制系统音量&#xff0c;从而控制音量。 活体检测页面固定音频流设置的是8&#xff08;无障碍…...

【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题

问题复现 项目上历史项目为解决漏洞扫描从Tomcat 6.0升级到了9.0版本&#xff0c;服务启动的日志显示如下警告&#xff0c;数据源是通过JNDI方式在server.xml中配置的&#xff0c;控制台上狂刷无法找到表空间的错误&#xff08;没截图&#xff09; 报错&#xff1a; 06-Nov-…...

Git LFS

Git LFS&#xff08;Git Large File Storage&#xff09;是一个用于管理和版本控制大文件的工具&#xff0c;它扩展了 Git 的功能&#xff0c;帮助处理大文件或二进制文件的存储和管理问题。 为什么需要 Git LFS&#xff1f; Git 默认是针对文本文件进行优化的&#xff0c;尤…...

基于Redis缓存机制实现高并发接口调试

创建接口 这里使用的是阿里云提供的接口服务直接做的测试&#xff0c;接口地址 curl http://localhost:8080/initData?tokenAppWithRedis 这里主要通过参数cacheFirstfalse和true来区分是否走缓存&#xff0c;正常的业务机制可能是通过后台代码逻辑自行控制的&#xff0c;这…...

数字化转型实践:金蝶云星空与钉钉集成提升企业运营效率

数字化转型实践&#xff1a;金蝶云星空与钉钉集成提升企业运营效率 本文介绍了深圳一家电子设备制造企业在数字化转型过程中&#xff0c;如何通过金蝶云星空与钉钉的高效集成应对挑战、实施解决方案&#xff0c;并取得显著成果。集成项目在提高沟通效率、自动化审批流程和监控异…...

Flutter 鸿蒙next 中使用 MobX 进行状态管理

Flutter & 鸿蒙next 中使用 MobX 进行状态管理 在应用开发中&#xff0c;状态管理是一个至关重要的环节&#xff0c;特别是在复杂的Flutter或鸿蒙next项目中。状态的变化往往会影响UI的更新&#xff0c;因此&#xff0c;选择一种高效、灵活的状态管理工具显得尤为重要。Mo…...

1.62亿元!812个项目立项!上海市2024年度“科技创新行动计划”自然科学基金项目立项

本期精选SCI&EI ●IEEE 1区TOP 计算机类&#xff08;含CCF&#xff09;&#xff1b; ●EI快刊&#xff1a;最快1周录用&#xff01; 知网(CNKI)、谷歌学术期刊 ●7天录用-检索&#xff08;100%录用&#xff09;&#xff0c;1周上线&#xff1b; 免费稿件评估 免费匹配期…...

Redis数据库测试和缓存穿透、雪崩、击穿

Redis数据库测试实验 实验要求 1.新建一张user表&#xff0c;在表内插入10000条数据。 2.①通过jdbc查询这10000条数据&#xff0c;记录查询时间。 ②通过redis查询这10000条数据&#xff0c;记录查询时间。 3.①再次查询这一万条数据&#xff0c;要求根据年龄进行排序&#…...

[vulnhub] DarkHole: 2

https://www.vulnhub.com/entry/darkhole-2,740/ 端口扫描主机发现 探测存活主机&#xff0c;185是靶机 # nmap -sP 192.168.75.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-11-08 18:02 CST Nmap scan report for 192.168.75.1 Host is up (0.…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...