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

        实际的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 TamsMenu = 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><tams-menu></tams-menu>
</template>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/59760.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 自动化测试应用

Python 自动化测试应用 目录 &#x1f9ea; 自动化测试基础与重要性&#x1f4dd; 使用 pytest、unittest 进行运维脚本和工具的自动化测试&#x1f527; 自动化测试与 CI/CD 集成&#x1f6e0; 测试驱动开发&#xff08;TDD&#xff09;在运维脚本中的应用&#x1f433; 模拟…

成都睿明智科技有限公司抖音电商服务效果如何?

在这个短视频风起云涌的时代&#xff0c;抖音电商以其独特的魅力&#xff0c;成为了众多商家竞相追逐的新蓝海。而在这片波澜壮阔的商海中&#xff0c;成都睿明智科技有限公司犹如一艘稳健的航船&#xff0c;引领着无数企业驶向成功的彼岸。今天&#xff0c;就让我们一起揭开成…

自然语言处理——Hugging Face 详解

Hugging Face 是一个以自然语言处理&#xff08;NLP&#xff09;为核心的人工智能平台和开源社区&#xff0c;提供了一系列非常流行的机器学习工具和预训练模型&#xff0c;尤其在文本生成、分类、翻译、情感分析等任务中表现出色。Hugging Face 旗下最为著名的项目是 Transfor…

SpringBoot基础系列学习(四):Thymeleaf模板

文章目录 一丶什么是模板引擎二丶Thymeleaf 介绍三丶使用引入依赖代码html页面响应 一丶什么是模板引擎 模板引擎是一种将数据和模板结合起来生成最终结果的工具&#xff0c;它将一个模板和一个数据对象作为输入&#xff0c;通过模板解析和渲染生成最终的结果。通俗地说&#…

「QT」几何数据类 之 QRectF 浮点型矩形类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…

动手学深度学习-使用d2l导致jupyter内核挂掉

参考如何解决Jupyter Notebook当中有关内核挂掉的问题_挂掉的内核-CSDN博客 在使用d2l库之前加入 import os os.environ["KMP_DUPLICATE_LIB_OK"]"TRUE"

阿里云centos7.9服务器磁盘挂载,切换服务路径

项目背景 1、项目使用的服务器为阿里云centos7.9&#xff0c;默认的磁盘为vda&#xff0c;文件系统挂载在这个磁盘上&#xff0c;项目上使用的文件夹为/home/hnst/uploadPath 2、vda使用率已达到91% 3、现购置一块新的磁盘为vdb&#xff0c;大小为2T 目的 切换服务所使用的…

uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)

一. 创建一个hooks hooks—>useSystemBar.js 二. useSystemBar.js 其中// #ifdef MP-WEIXIN 不是注释 这是uni-app的写法 import {ref} from vue;export default function() {// 获取系统信息let systemInfo ;// #ifdef MP-WEIXINsystemInfo uni.getWindowInfo…

每日科技资讯:2024年11月09日【龙】农历十月初九 ---文末送书

目录 1.史上最强游戏CPU&#xff01;9800X3D首发评测2.苹果喊话iPhone 13和14钉子户&#xff1a;16方方面面都升级了3.加拿大政府下令 TikTok 关闭该国业务&#xff0c;但应用仍可以继续访问4.OpenAI 刚刚花了超过 1000 万美元购买了Chat.com5.Max 加入打击密码共享行列6.微软可…

探索深度学习的本质

深度学习的本质是利用多层&#xff08;深层&#xff09;的神经网络结构来从数据中学习复杂的模式和特征。其主要特点是具有层次结构&#xff0c;能够实现自动特征提取。非线性、可扩展性和迁移学习能力是深度学习能够处理复杂问题和广泛&#xff08;低成本&#xff09;应用的关…

vue3 + vite引入地址路径报错,以及无法点击跳转相应的文件

vue3 vite引入地址路径报错&#xff0c;以及无法点击跳转相应的文件 在项目中找到tsconfig.json&#xff0c;或者jsconfig.json 文件&#xff0c;使用一下代码替换即可。如果两个文件都不存在&#xff0c;如果项目使用了ts&#xff0c;就创建tsconfig.json文件&#xff0c;复…

API接口:助力汽车管理与安全应用

随着汽车行业的飞速发展&#xff0c;越来越多的汽车管理技术被应用到交通安全和智慧交通系统中。在这一过程中&#xff0c;API接口起到了至关重要的作用。通过API接口&#xff0c;我们可以实现诸如车主身份验核、车辆信息查询等功能&#xff0c;从而为汽车智慧交通发展与安全应…

TikTok本土店vs跨境店:解读TikTok小店差异

TikTok小店的两种主要的店铺类型&#xff1a;本土店和跨境店&#xff0c;虽然这两种店铺在功能上有相似之处&#xff0c;但它们在运营模式、市场定位、目标受众和面临的挑战等方面存在显著的区别。 一、定义与基本特征 1. TikTok本土店 本土店指的是在特定国家或地区内经营的…

[libos源码学习 1] Liboc协程生产者消费者举例

文章目录 1. CoRoutineEnv_t结构体用于管理协程环境 3 Liboc协程生产者消费者例子4 Liboc协程生产者消费者&#xff0c; 为什么队列不需要上锁&#xff1f;5. 两个协程访问资源不需要加队列吗5. 参考 1. CoRoutineEnv_t结构体用于管理协程环境 struct stCoRoutineEnv_t { stCo…

【leetcode】动态规划刷题总结-划分问题

判定能否划分 一般定义dp[i]表示nums[:i 1]能否划分&#xff0c;然后枚举最后一个子数组的左端点&#xff0c;得到nums[:i 1]能否划分 LeetCode2369题 检查数组是否存在有效划分 class Solution:def validPartition(self, nums: List[int]) -> bool:if len(nums) 2:re…

[含文档+PPT+源码等]精品基于springboot实现的原生Andriod广告播放系统

基于Spring Boot实现的原生Android广告播放系统背景&#xff0c;主要可以从以下几个方面进行阐述&#xff1a; 一、市场需求与背景 移动互联网的快速发展&#xff1a; 随着移动互联网技术的不断进步&#xff0c;智能手机已成为人们日常生活中不可或缺的一部分。人们越来越多地…

【汇编语言】[BX]和loop指令(四)—— 汇编语言中的段前缀与内存保护:原理与应用解析

文章目录 前言1. 段前缀1.1 示例演示1.2 总结 2. 一段安全的空间2.1 存在的问题2.2 示例演示2.2.1 编译、链接、加载程序2.2.2 运行程序 2.3 总结 3. 段前缀的使用3.1 问题引入3.2 分析问题3.3 代码实现3.4 程序的改进3.4.1 分析3.4.2 代码实现 结语 前言 &#x1f4cc; 汇编语…

经典双指针--合并升序链表

#include <stdio.h> #include <stdlib.h> #include <stdbool.h> #include <string.h>typedef struct Node {int data;struct Node* next; } Node;Node* newNode(int data);/* 请完成下面的函数 */ Node* mergeList(Node* L1, Node* L2) {Node* head n…

Python代码主要实现了一个基于Transformer和LSTM的混合模型,用于对给定数据集进行二分类任务

Python代码主要实现了一个基于Transformer和LSTM的混合模型,用于对给定数据集进行二分类任务。代码的大致流程包括数据读取、数据预处理、模型构建、模型训练与评估以及结果输出。 #!/usr/bin/env python # coding: utf-8# In[4]:import numpy as np import pandas as pd imp…

dell服务器安装ESXI8

1.下载镜像在官网 2.打开ipmi&#xff08;idrac&#xff09;&#xff0c;将esxi镜像挂载&#xff0c;然后服务器开机 3.进入bios设置cpu虚拟化开启&#xff0c;进入boot设置启动选项为映像方式 4..进入安装引导界面3.加载完配置进入安装 系统提示点击继 5.选择安装磁盘进行…