VUE3（二十二）vue-router 開啟路由懶加載

一、為什么要使用路由懶加載

為給客戶更好的客戶體驗，首屏組件加載速度更快一些，解決白屏問題。

二、定義

懶加載簡單來說就是延遲加載或按需加載，即在需要的時候的時候進行加載。

三、使用

常用的懶加載方式有兩種：即使用vue異步組件 和 ES中的import

1、未用懶加載，vue中路由代碼如下

// 官方文檔：https://vue3js.cn/router4/guide/#html
// 引入vue-router對象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
import view404 from "/@/views/404.vue ";
 
/**
 * 定義路由數組
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: view404
  },
];
 
/**
 * 創建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 輸出對象
 */
export default router;

2、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;

3、ES 提出的import方法，（------最常用------）

方法如下：const HelloWorld = （）=>import('需要加載的模塊地址')（不加 { } ，表示直接return）

// 官方文檔：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;

有好的建議，請在下方輸入你的評論。
歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：