平武建站

vue为什么要进行路由懒加载

本文小编为大家详细介绍“vue为什么要进行路由懒加载”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue为什么要进行路由懒加载”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

目前成都创新互联公司已为近1000家的企业提供了网站建设、域名、网页空间、网站托管、服务器租用、企业网站设计、城口网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

路由懒加载

懒加载本质是延迟加载或按需加载，即在需要的时候的时候进行加载。
首页不用设置懒加载，一个页面加载过后再次访问不会重复加载。

为什么要进行路由懒加载

  • 当进行打包构建应用时，打包后的代码逻辑实现包可能会非常大。当用户要去使用的时候，那么就会把所有的资源都请求下来才可以。

  • 当我们把不同的路由对应的组件分别打包，在路由被访问时再进行加载，就会更加高效。

路由懒加载所做的事情

  • 将路由对应的组件加载成一个个对应的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;

读到这里，这篇“vue为什么要进行路由懒加载”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。


本文名称：vue为什么要进行路由懒加载
本文URL：http://pwwzsj.com/article/gpjeco.html

其他资讯