vue中什么是路由懒加载?为什么要进行?-环球百事通

来源:php中文网 | 2023-03-06 19:52:42 |

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中文网其它相关文章!

关键词: 路由懒加载