Berbagi teknologi

Tiga cara proyek Vue mengimplementasikan pemuatan rute sesuai permintaan (pemuatan rute yang lambat)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

  1. Menggunakan komponen asinkron Saat menggunakan vue-router untuk mengonfigurasi perutean, Anda dapat menggunakan komponen asinkron untuk mengimplementasikan pemuatan rute sesuai permintaan. Komponen asinkron akan dimuat hanya ketika rute diakses, sehingga mencapai pemuatan sesuai permintaan. Perlu dicatat bahwa penggunaan komponen asinkron memerlukan penggunaan sintaks impor dinamis webpack. Misalnya:
  1. const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue')
  2. const routes = [
  3. {
  4. path: '/',
  5. name: 'Home',
  6. component: Home
  7. }
  8. ]

  1. Menggunakan fungsi pabrik komponen asinkron Vue Vue menyediakan fungsi pabrik komponen asinkron untuk mengimplementasikan pemuatan rute sesuai permintaan.Saat menggunakan VueRouter untuk mengonfigurasi perutean, Anda dapat menggunakancomponent: () => import('./views/Home.vue') untuk mendefinisikan komponen asinkron. Dengan cara ini, ketika rute diakses, komponen terkait akan dimuat secara dinamis.
  1. const routes = [
  2. {
  3. path: '/',
  4. name: 'Home',
  5. component: () => import('./views/Home.vue')
  6. }
  7. ]

  1. Menggunakan fungsi impor komponen yang diperkenalkan secara dinamis Menggunakan fungsi impor komponen yang diperkenalkan secara dinamis di ES6, Anda dapat mengimplementasikan pemuatan rute sesuai permintaan di vue-router.Saat mengonfigurasi perutean, Anda dapat menggunakancomponent: () => import('./views/Home.vue')untuk mendefinisikan komponen asinkron.
  1. const routes = [
  2. {
  3. path: '/',
  4. name: 'Home',
  5. component: () => import('./views/Home.vue')
  6. }
  7. ]

Ketiga metode di atas dapat mencapai pemuatan rute sesuai permintaan. Metode mana yang harus dipilih bergantung pada preferensi pribadi dan kebutuhan proyek.