欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3?vite異步組件及路由懶加載實(shí)戰(zhàn)示例

 更新時(shí)間：2022年06月30日 10:47:09   作者：天問  
這篇文章主要為大家介紹了vue3?vite異步組件及路由懶加載實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

在 Vue2 中，異步組件和路由懶加載處理使用 import 就可以很輕松實(shí)現(xiàn)。但是在Vue 3.x 中異步組件的使用與 Vue 2.x 完全不同了。本文就詳細(xì)講講vue3中異步組件和路由懶加載的實(shí)現(xiàn)。

Vue3 異步組件/路由

一、前言

1-1.三點(diǎn)變化：

  • 異步組件聲明方法的改變：Vue 3.x 新增一個(gè)輔助函數(shù)defineAsyncComponent，用來顯示聲明異步組件
  • 異步組件高級聲明方法中的 component 選項(xiàng)更名為loader
  • loader綁定的組件加載函數(shù)不再接收resolve和reject參數(shù)，而且必須返回一個(gè)Promise

1-2.引入輔助函數(shù)defineAsyncComponent的原因：

現(xiàn)在，在 Vue 3 中，由于函數(shù)組件被定義為純函數(shù)，異步組件定義需要通過將其包裝在一個(gè)新的 defineAsyncComponent helper 中來顯式定義。

二、Vue 2.x與Vue 3.x定義比較

2-1.異步組件/路由定義比較

  • 2-1-1.在 Vue 2.x 中，聲明一個(gè)異步組件只需這樣：
const asyncPage = () => import('./views/home.vue')
  • 2-1-2.在 Vue 3.x 中，異步組件的導(dǎo)入需要使用輔助函數(shù)defineAsyncComponent來進(jìn)行顯式聲明。如下：
<template>
  <div>
    <h1>Async Components</h1>
    <p>異步組件測試</p>
    <child />
  </div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
const child = defineAsyncComponent(() => import('@/components/async-component-child.vue'))
export default {
  name: 'async-components',
  components:{
    'child': child
  }
};
</script>

2-2.聲明方式比較

  • 2-2-1.Vue 2.x中異步組件的聲明有更高級的聲明方式。如下：
const asyncPageWithOptions  = {
  component: () => import('./views/home.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

所以，下面的異步組件聲明：

const asyncPage = () => import('./views/home.vue')

等價(jià)于：

const asyncPageWithOptions  = {
  component: () => import('./views/home.vue')
}
  • 2-2-2.Vue 3.x中也可以這樣聲明異步組件。只是其中的component需要改為loader。如下：
const asyncPageWithOptions  = defineAsyncComponent({
  loader: () => import('./views/home.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
})

2-3.異步組件加載函數(shù)返回比較

  • 2-3-1.在Vue 2.x中接收resolve和reject：
// 2.x version
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}
  • 2-3-2.在Vue 3.x中始終返回Promise：
// 3.x version
const asyncComponent = defineAsyncComponent(
  () => new Promise((resolve, reject) => {
      /* ... */
  })
)

Vue 3.x的異步組件加載函數(shù)將不再接收resolve和reject，而且必須始終返回Promise。也就是說，工廠函數(shù)接收 resolve 回調(diào)的方式定義異步組件在 Vue 3.x 不能使用了。

// 在 Vue 3.x 中不適用
export default {
  components: {
    asyncPage: resolve => require(['@/components/list.vue'], resolve)
  },
}

三、Vue3實(shí)踐

提示： 如果是用vite工具來構(gòu)建項(xiàng)目，在本地開發(fā)使用import做路由懶加載，可以正常加載，但是會報(bào)警告；打包到生產(chǎn)環(huán)境會報(bào)錯(cuò)，頁面不會正常展示，可以使用以下兩種方法來實(shí)現(xiàn)。

3-1.路由懶加載實(shí)現(xiàn)

  • 3-1-1.defineAsyncComponent方法
// router/index.js
import { defineAsyncComponent } from 'vue'
const _import = (path) => defineAsyncComponent(() => import(`../views/${path}.vue`));
const routes = [
  {
    path: '/async-component',
    name: 'asyncComponent',
    component: _import('home'),
  }
];
  • 3-1-2.import.meta.glob方法
// 1.上面的方法相當(dāng)于一次性加載了 views 目錄下的所有.vue文件，返回一個(gè)對象
const modules = import.meta.glob('../views/*/*.vue');
const modules ={
    "../views/about/index.vue": () => import("./src/views/about/index.vue")
}
// 2.動(dòng)態(tài)導(dǎo)入的時(shí)候直接，引用
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...
    {
      path: 'xxxx',
      name: 'xxxxx',
      // 原來的方式，這個(gè)在開發(fā)中可行，但是生產(chǎn)中不行
      // component: () => import(`../views${menu.file}`),
      // 改成下面這樣
      component: modules[`../views${filename}`]
    }
    // ...          
  ],
})

3-2.異步組件實(shí)現(xiàn)

<template>
  <div>
    <h1>Async Components</h1>
    <p>異步組件測試</p>
    <child></child>
  </div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
const child = defineAsyncComponent(() => import('@/components/async-component-child.vue'))
export default {
  name: 'async-components',
  components:{
    'child': child
  }
};
</script>

四、總結(jié)

簡單來說，寫在路由配置文件中的異步加載就是路由懶加載的用法，而寫在組件內(nèi)部的異步加載就是異步組件用法。

以上就是vue3 vite異步組件及路由懶加載實(shí)戰(zhàn)示例的詳細(xì)內(nèi)容，更多關(guān)于vue3 vite異步組件路由懶加載的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • vue components 動(dòng)態(tài)組件詳解

    vue components 動(dòng)態(tài)組件詳解

    這篇文章主要介紹了vue components 動(dòng)態(tài)組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-11-11
  • element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo

    element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo

    這篇文章主要為大家介紹了element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11
  • Vue一次性簡潔明了引入所有公共組件的方法

    Vue一次性簡潔明了引入所有公共組件的方法

    這篇文章主要介紹了Vue一次性簡潔明了引入所有公共組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-11-11
  • Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)

    Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)

    這篇文章主要為大家詳細(xì)介紹了Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-10-10
  • 在pycharm中開發(fā)vue的方法步驟

    在pycharm中開發(fā)vue的方法步驟

    這篇文章主要介紹了在pycharm中開發(fā)vue的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • vue+elementUi實(shí)現(xiàn)點(diǎn)擊地圖自動(dòng)填充經(jīng)緯度以及地點(diǎn)

    vue+elementUi實(shí)現(xiàn)點(diǎn)擊地圖自動(dòng)填充經(jīng)緯度以及地點(diǎn)

    這篇文章主要為大家詳細(xì)介紹了vue+elementUi實(shí)現(xiàn)點(diǎn)擊地圖自動(dòng)填充經(jīng)緯度以及地點(diǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue3中的useAttrs和props的區(qū)別解析

    vue3中的useAttrs和props的區(qū)別解析

    在vue3中,?提供了一個(gè)?useAttrs?的方法它接收到的參數(shù)一?prop中可以接收到的數(shù)據(jù)是基本一樣的如果我們想自已寫一個(gè)組件,?把?elementPlus?中的期中一個(gè)組件封裝一下,這篇文章主要介紹了vue3中的useAttrs和props的區(qū)別,需要的朋友可以參考下
    2023-09-09
  • Vue中常見的幾種傳參方式小結(jié)

    Vue中常見的幾種傳參方式小結(jié)

    Vue組件的使用不管是在平常工作還是在面試面試中,都是頻繁出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于Vue中常見的幾種傳參方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • 關(guān)于vue.js中this.$emit的理解使用

    關(guān)于vue.js中this.$emit的理解使用

    本文主要介紹了關(guān)于vue.js中this.$emit的理解使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • VUE中的自定義指令鉤子函數(shù)講解

    VUE中的自定義指令鉤子函數(shù)講解

    這篇文章主要介紹了VUE中的自定義指令鉤子函數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08

最新評論