vue3 动态加载组件、动态引入组件

这篇具有很好参考价值的文章主要介绍了vue3 动态加载组件、动态引入组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.问题
在做一个用vite构建的vue3项目时,动态拉取导入.vue页面,然后控制台一直有以下提示,页面也无法渲染出来。
vue3 动态加载组件、动态引入组件
2.分析
根据上面的报错提示,让我们安装并使用:@rollup/plugin-dynamic-import-vars 这个插件(最终没有这个方案)。

Vite官方文档说需要使用Glob 导入形式,然后看了一个Glob的文档,解决了这个问题(亲测可行)。

首先需要使用特殊的import.meta.glob函数从文件系统导入多个模块:

const modules = import.meta.glob('../views/*/*.vue');

他会匹配并导入所有相关的组件:

// vite 生成的代码
const modules = {
  './views/foo.vue': () => import('./views/foo.vue'),
  './views/bar.vue': () => import('./views/bar.vue')
}

那么回到项目中,在home文件夹下的index.vue文件中导入custom_components文件夹下的所有.vue文件
vue3 动态加载组件、动态引入组件
因此,根据vite的import.meta.glob函数:就可以获得对应的custom_components文件夹下的.vue文件

const changeComponents = (e:string)=>{
	const link = modules[`../custom_components/${e}.vue`]
	console.log(link,'link')
}

打印link可以看到
vue3 动态加载组件、动态引入组件
最后就是异步注册组件

layouts.value = markRaw(defineAsyncComponent(link))

3.最后
下面贴出完整案例,仅供参考。有更好的或者需要优化的可以提问一起探讨。文章来源地址https://www.toymoban.com/news/detail-406383.html

<template>	
	<div @click="changeComponents('kk')">显示kk.vue</div>
	<div @click="changeComponents('index')">显示index.vue</div>
	<component :is="layouts"/>
</template>

<script lang='ts' setup>
	const modules = import.meta.glob('../custom_components/*.vue');
	let layouts = ref<any>(null)
	const changeComponents = (e:string)=>{
		const link = modules[`../custom_components/${e}.vue`]
        layouts.value = markRaw(defineAsyncComponent(link))
	}
</script>

到了这里,关于vue3 动态加载组件、动态引入组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3,vite开发, 动态引入组件,同时动态设置组件的name,用于keep-alive缓存

    如果有两个页面逻辑大都相同,咱们想到的第一个肯定是写一个组件,然后两个路由都指向这个组件。 那如果现在多添加一个需求:两个页面在切换路由时都需要缓存数据,并且两个页面的缓存数据要求独立。 这个需求很简单:在router-view外层包裹一个keep-alive组件,指定缓

    2024年02月07日
    浏览(45)
  • vue3动态组件组件shallowRef包裹问题

    在vue3做tabs切换功能的时候,如果导入的组件不适用shallowRef包裹会显示下面的警告: 根据提示代码修改如下: 就能解决上面的问题。

    2024年02月22日
    浏览(55)
  • 如何vue使用ant design Vue中的select组件实现下拉分页加载数据,并解决存在的一个问题。

        需求:拉下菜单中数据过多,200条以上,就会导致select组件卡死。所以需要使用滑动到底部使其分页加载     可以借助 onPopupScroll 事件来监听下拉菜单的滚动事件,并判断当前是否已经到达了下拉菜单底部。具体可以通过以下步骤实现:     1、在组件中绑定 @popupScro

    2023年04月20日
    浏览(52)
  • Vue3 - vite 引入本地图片方法,页面引入本地静态资源图像详细教程,解决 UI 前端组件库的图片属性无法使用本地图像问题(无论是本地开发还是打包部署,本地图片的路径正常可用)

    在 webpack 中通常用 require() 来引入静态图片,但在 vite 中这种方法就不行了。 本文实现了 在 vue3+vite 项目开发中,实现引入本地图片(静态资源),并且 build 打包后依然正常运行, 支持普通 img 标签使用,也支持 UI 组件库的各种 “图片属性” 当参数进行使用。 如下图所示

    2024年02月08日
    浏览(67)
  • vue3 一个基于pinia简单易懂的系统权限管理实现方案,vue-router动态路由异步问题解决

    作为项目经验稀少的vue开发者来说,在关键技术点上的经验不多,我希望通过我的思想和实践,把好的东西分享在这里,目的是进一步促进技术交流。项目即将完成,权限是最后的收尾工作,好的权限实现方案,可以让我们没有后顾之忧,也可以提升项目的运行速度。 在开发

    2023年04月08日
    浏览(53)
  • vue3+ts+vite项目引入echarts,vue3项目echarts组件封装

    技术栈 :Vue3 + Ts + Vite + Echarts 简介 : 图文详解,教你如何在 Vue3 项目中 引入Echarts , 封装Echarts组件 ,并实现常用Echarts图例 1.1 静态效果 1.2 动态效果 2.1 安装 Echarts npm: pnpm: 2.2 main.ts 中引入 2.3 Echarts 组件封装 /src/components/ReEcharts/index.vue 文件中写入如下代码 3.1 柱状图 实现

    2024年02月09日
    浏览(60)
  • 搭建vue3项目+按需引入element-ui框架组件

    场景 :使用vue create脚手架快速搭建vue的项目 前提 :需要安装node.js和cnpm以及yarn 并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索 查看安装的版本(显示版本号说明安装成功) 1.cmd窗口跳到需要新建项目的文件夹下,使用vue create 2.我这里选择第三个Ma

    2024年02月16日
    浏览(61)
  • 从0搭建Vue3组件库(十三):引入Husky规范git提交

    虽然我们项目中引入了 prettier 和 eslint 对代码格式进行了校验,但是多人开发的时候难免依然会有人提交不符合规范的代码到仓库中,如果我们拉取到这种代码还得慢慢对其进行修改,这是一件很麻烦的事情,同时也为了避免团队成员提交五花八门message,因此我们可以引入 husky 来从

    2024年02月07日
    浏览(51)
  • Vue3中使用component :is 加载组件

    1.不使用setup语法糖,这种方式和vue2差不多,is可以是个字符串 2. 使用setup语法糖,这时候的is如果使用字符串会加载不出来,得使用组件实例 第一种方式 第二种方式

    2024年02月16日
    浏览(42)
  • vue3项目引入本地js文件,实现一个音频播放按钮

    目前有一个需求就是在网页上放置一个音乐控制按钮,并且是在vue3项目里面。于是小白的我遇到了2个问题,第一个问题是如何实现没有进度条的播放按钮,这个网上有现成的代码,可以通过js代码切换不同的图片或者是别的样式,并不算难;第二个问题是如何在vue3项目中引

    2024年02月19日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包