Apakah pemuatan malas laluan dalam Vue? kenapa buat?

Apakah malas memuatkan laluan dalam vue? Mengapa kita perlu malas memuatkan laluan? Artikel berikut akan membawa anda memahami pemuatan laluan yang malas dalam Vue. Saya harap ia akan membantu anda!

Laluan pemuatan malas

Intipati pemuatan malas ialah pemuatan malas atau pemuatan atas permintaan, iaitu, apabila diperlukan Masa memuatkan.
Tidak perlu menetapkan pemuatan malas pada halaman utama Selepas halaman dimuatkan, ia tidak akan dimuatkan lagi apabila anda melawatinya semula.

Mengapa pemuatan malas laluan diperlukan

• Apabila membungkus dan membina aplikasi, pakej pelaksanaan logik kod yang dibungkus mungkin sangat besar. Apabila pengguna ingin menggunakannya, semua sumber akan diminta.

• Apabila kami membungkus komponen yang sepadan dengan laluan berbeza secara berasingan dan memuatkannya apabila laluan itu diakses, ia akan menjadi lebih cekap. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Apakah yang dilakukan oleh pemuatan malas penghalaan

• Muatkan komponen yang sepadan dengan laluan ke dalam pakej js yang sepadan.

• Komponen yang sepadan akan dimuatkan hanya apabila laluan itu diakses.

komponen tak segerak vue

Sintaks:component：resolve=>(require(['需要加载的路由的地址'])，resolve)

// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: resolve=>(require(["/@/views/404.vue"],resolve))
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 输出对象
 */
export default router;

ES import yang biasa digunakan

Apabila pengguna mengakses komponen, fungsi anak panah dilaksanakan
webpack: import dynamic sintaks import boleh Pakej fail secara berasingan
Sintaks: const xxx = （）=>import('需要加载的模块地址')

// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: ()=>import('/@/views/404.vue')
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 输出对象
 */
export default router;

(Belajar perkongsian video: tutorial pengenalan vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Apakah pemuatan malas laluan dalam Vue? kenapa buat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!