vue3.0+vite2实现动态异步组件懒加载

创建一个vite项目

性能决定成败;vite确实快；
cmd 命令行(默认你已经安装了node & npm)，执行npm init @vitejs/app vue-study – –template vue；
cd至vue-study，npm install(安装依赖); npm run dev（启动项目）；

创建组件

新建一个目录为pages，pages下面再新建一个目录contents，contens下面可以新建具体的组件目录页面，此时目录结构为

app.vue

<template>
 <p @click="onchangecontents('./pages/contents/gp/gp.vue')">郭培</p>
 <p @click="onchangecontents('./pages/contents/systemmanges/xtcs.vue')">系统参数</p>
 <p>{{currenttabcomponent}}</p>
 <!-- <suspense> -->
 <component :is="defineasynccomponent({
     // 工厂函数
     loader: modeuls[currenttabcomponent],
     // // 默认值：infinity（即永不超时，单位 ms）
     timeout: 3000,
    })"></component>
 <!-- </suspense> -->
</template>
<script lang="ts">
 import {
  definecomponent,
  defineasynccomponent,
  reactive,
  ref
 } from 'vue'
 export default definecomponent({
  name: 'app',
  setup() {
   //vite加载指定路径的所有模块
   const modeuls = import.meta.glob('./pages/contents/*/*');
   const onchangecontents = function(url) {
    currenttabcomponent.value = url;
    console.log(currenttabcomponent)
   }
   let currenttabcomponent = ref('./pages/contents/systemmanges/xtcs.vue');
   const defineasynccomponent = defineasynccomponent;
   return {
    defineasynccomponent,
    currenttabcomponent,
    onchangecontents,
    modeuls
   }
  },
 })
</script>

到此这篇关于vue3.0+vite2实现动态异步组件懒加载的文章就介绍到这了,更多相关vue3.0+vite2动态异步懒加载内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！