快捷導(dǎo)航

vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載

更新時(shí)間：2021年06月28日 15:39:52 作者：高梅飛花

學(xué)了vue寫(xiě)項(xiàng)目這么久,忽然發(fā)現(xiàn)路由懶加載的寫(xiě)法,節(jié)省了加載所有路由的時(shí)間。本文主要介紹了vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載，感興趣的可以了解一下

創(chuàng)建一個(gè)vite項(xiàng)目

性能決定成敗;vite確實(shí)快；
cmd 命令行(默認(rèn)你已經(jīng)安裝了node & npm)，執(zhí)行npm init @vitejs/app vue-study – --template vue；
cd至vue-study，npm install(安裝依賴(lài)); npm run dev（啟動(dòng)項(xiàng)目）；

創(chuàng)建組件

新建一個(gè)目錄為pages，pages下面再新建一個(gè)目錄contents，contens下面可以新建具體的組件目錄頁(yè)面，此時(shí)目錄結(jié)構(gòu)為

App.vue

<template>
 <p @click="onChangeContents('./pages/contents/gp/gp.vue')">郭培</p>
 <p @click="onChangeContents('./pages/contents/systemManges/xtcs.vue')">系統(tǒng)參數(shù)</p>
 <p>{{currentTabComponent}}</p>
 <!-- <Suspense> -->
 <component :is="DefineAsyncComponent({
     // 工廠函數(shù)
     loader: Modeuls[currentTabComponent],
     // // 默認(rèn)值：Infinity（即永不超時(shí)，單位 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>

到此這篇關(guān)于vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載的文章就介紹到這了,更多相關(guān)vue3.0+vite2動(dòng)態(tài)異步懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue input輸入框回車(chē)以后自動(dòng)刷新頁(yè)面(直播程序)
這篇文章主要介紹了直播程序，Vue input輸入框回車(chē)以后自動(dòng)刷新頁(yè)面,適用場(chǎng)景是在輸入框輸入字符并按下回車(chē)鍵搜索時(shí)，刷新頁(yè)面，需要的朋友參考下實(shí)現(xiàn)代碼
2023-01-01
淺談Vue.js中ref ($refs)用法舉例總結(jié)
本篇文章主要介紹了淺談Vue.js中ref ($refs)用法舉例總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例
本文主要介紹了Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue瀑布流組件實(shí)現(xiàn)上拉加載更多
這篇文章主要為大家詳細(xì)介紹了vue瀑布流組件實(shí)現(xiàn)上拉加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
vue2如何實(shí)現(xiàn)vue3的teleport
這篇文章主要介紹了vue2如何實(shí)現(xiàn)vue3的teleport，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue中使用moment設(shè)置倒計(jì)時(shí)的方法
這篇文章給大家介紹了vue中使用moment設(shè)置倒計(jì)時(shí)的方法,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-02-02
解決vue打包后vendor.js文件過(guò)大問(wèn)題
這篇文章主要介紹了解決vue打包后vendor.js文件過(guò)大問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07
vue實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
vue日歷組件的封裝方法
這篇文章主要為大家詳細(xì)介紹了vue封裝一個(gè)日歷組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
詳解解決使用axios發(fā)送json后臺(tái)接收不到的問(wèn)題
這篇文章主要介紹了詳解解決使用axios發(fā)送json后臺(tái)接收不到的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06