首頁  >  文章  >  web前端  >  vue中什麼是路由懶載入?為什麼要進行?

vue中什麼是路由懶載入?為什麼要進行?

青灯夜游
青灯夜游轉載
2023-03-06 19:28:442133瀏覽

vue中什麼是路由懶載入?為什麼要進行路由懶加載路由?以下這篇文章帶大家了解vue中的路由懶加載,希望對大家有幫助!

vue中什麼是路由懶載入?為什麼要進行?

#路由懶載入

懶載入本質是延遲載入或按需加載,即在需要的時候的時候進行加載。
首頁不用設定懶加載,一個頁面加載過後再次訪問不會重複加載

為什麼要進行路由懶載入

  • 當進行打包建置應用程式時,打包後的程式碼邏輯實作套件可能會非常大。當使用者要去使用的時候,那麼就會把所有的資源都請求下來才可以。

  • 當我們把不同的路由對應的元件分別打包,在路由被存取時再進行加載,就會更有效率。 【相關推薦:vuejs影片教學web前端開發

#路由懶載入所做的事情

  • 將路由對應的元件載入成一個對應的js套件。

  • 在路由被存取時才將對應的元件載入。

vue非同步元件

語法: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 常用

#使用者存取元件時,此箭頭函數會執行
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;

(學習影片分享:vuejs入門教學程式設計基礎影片

以上是vue中什麼是路由懶載入?為什麼要進行?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除