vue中什麼是路由懶載入？為什麼要進行路由懶加載路由？以下這篇文章帶大家了解vue中的路由懶加載，希望對大家有幫助！
懶載入本質是延遲載入或按需加載，即在需要的時候的時候進行加載。
首頁不用設定懶加載，一個頁面加載過後再次訪問不會重複加載。
為什麼要進行路由懶載入
當進行打包建置應用程式時，打包後的程式碼邏輯實作套件可能會非常大。當使用者要去使用的時候，那麼就會把所有的資源都請求下來才可以。
當我們把不同的路由對應的元件分別打包，在路由被存取時再進行加載，就會更有效率。 【相關推薦：vuejs影片教學、web前端開發】
#路由懶載入所做的事情
將路由對應的元件載入成一個對應的js套件。
在路由被存取時才將對應的元件載入。
語法: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;#使用者存取元件時，此箭頭函數會執行
webpack：import動態導入語法能將該檔案單獨打包
語法：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;以上是vue中什麼是路由懶載入？為什麼要進行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
