Cara menggunakan fungsi pemuatan malas penghalaan dalam dokumentasi Vue

Vue ialah rangka kerja JavaScript popular yang menyediakan cara mudah untuk membina antara muka pengguna yang dinamik dan interaktif. Fungsi penghalaan Vue membolehkan pembangun mengurus navigasi aplikasi dan lompatan halaman dengan mudah. Dalam dokumentasi Vue, terdapat fungsi pemuatan malas laluan yang boleh meningkatkan prestasi aplikasi dengan ketara. Dalam artikel ini, kami akan memperkenalkan secara terperinci cara menggunakan fungsi pemuatan malas penghalaan dalam dokumentasi Vue.

Apakah yang dimaksudkan dengan malas memuatkan laluan?

Dalam pembangunan web tradisional, apabila pengguna mengakses aplikasi kami, semua fail JavaScript dan CSS dimuat turun ke penyemak imbas. Ini boleh menyebabkan masa muat pertama yang lebih lama, terutamanya apabila aplikasi lebih besar. Untuk menyelesaikan masalah ini, Vue menyediakan pemuatan malas laluan. Apa yang dipanggil "pemuatan malas" bermaksud memuatkan fail hanya apabila diperlukan, yang boleh mengurangkan masa pemuatan awal aplikasi.

Fungsi pemuatan malas laluan dalam dokumentasi Vue

Dokumentasi Vue menyediakan fungsi pemuatan malas penghalaan yang membenarkan komponen halaman dimuatkan hanya apabila diperlukan, bukannya memuatkan dalam muat turun aplikasi semua. Pendekatan ini boleh meningkatkan prestasi aplikasi dengan ketara. Begini cara menggunakan fungsi:

const Foo = () => import('./Foo.vue')

Dalam contoh di atas, kami menentukan komponen yang dipanggil "Foo". Komponen ini dimuatkan secara tidak segerak menggunakan kaedah import yang disediakan oleh Vue. Ambil perhatian bahawa kaedah import bukanlah pernyataan import dalam ES6, tetapi sintaks pemuatan tak segerak yang disediakan oleh Vue.

Apabila menggunakan kaedah import, anda perlu menghantar laluan komponen kepadanya sebagai parameter. Dalam contoh di atas, laluan ke komponen ialah "./Foo.vue". Jika komponen kami berada dalam folder yang berbeza, laluan perlu dilaraskan dengan sewajarnya.

Gunakan fungsi pemuatan malas pada laluan

Selepas menentukan fungsi pemuatan malas laluan, kita perlu menerapkannya pada laluan. Berikut ialah contoh definisi laluan mudah:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: () => import('./Foo.vue')
    },
    {
      path: '/bar',
      component: () => import('./Bar.vue')
    }
  ]
})

Dalam contoh di atas, kami menggunakan kaedah use Vue untuk memuatkan VueRouter. Kami kemudian membuat contoh router dan memberikannya pelbagai laluan.

Dalam tatasusunan penghalaan, kami mentakrifkan dua peraturan penghalaan. Setiap peraturan penghalaan mengandungi laluan dan komponen. Di sini, kami menggunakan fungsi pemuatan malas penghalaan yang disebutkan di atas untuk memuatkan komponen secara tidak segerak.

Ringkasan

Fungsi pemuatan malas penghalaan Vue boleh meningkatkan prestasi aplikasi dengan sangat baik. Ia membolehkan kami memuatkan komponen hanya apabila diperlukan dan bukannya memuatkan kesemuanya ke dalam penyemak imbas sekaligus. Dalam dokumentasi Vue, terdapat fungsi pemuatan malas laluan mudah yang boleh digunakan. Kita boleh menggunakan fungsi ini dengan menggunakan ia pada laluan. Penggunaan fungsi ini sangat mudah Anda hanya perlu melepasi laluan komponen kepadanya untuk merealisasikan fungsi memuatkan komponen secara tidak segerak.

Atas ialah kandungan terperinci Cara menggunakan fungsi pemuatan malas penghalaan dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!