vue-router实现路由懒加载( 动态加载路由 ),vue router路由懒加载
本文主要介绍了vue-router路由的三种延迟加载方式及其实现。文章通过示例代码非常详细，对你的学习或者工作有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
什么是路由懒加载？
也称延迟加载，即需要时加载，按需加载。
官方解释：
1:打包构建应用时，JavaScript包会变得非常大，影响页面加载。
2.如果能把不同路由对应的组件分成不同的代码块，然后在访问路由时加载相应的组件，效率会更高。
官方说法是什么？为什么需要懒装？
1:首先我们知道，路由中通常会定义很多不同的页面。
2:在这个页面被构建和打包之后，它通常会被放在一个单独的js文件中。
3.但是，如果很多页面放在同一个js文件中，这个页面必然会非常大。
4.如果我们一次从服务器请求这个页面，可能需要一些时间，用户体验也不好。
5:如何避免这种情况发生？就用路由懒加载吧。
继续解释原由？
1.对于vue这样的单页应用，如果没有应用的懒加载，用webpack打包的文件会异常大。
2.进入首页需要加载的内容太多，时间太长，长时间出现白屏。即使做加载，也不利于用户体验。
3.通过使用懒加载，可以对页面进行划分，在需要的时候加载页面，可以有效分担首页所承受的加载压力，减少首页的加载时间。
也就是说，进入页面不需要一次加载太多资源，造成加载时间过程！
路由懒加载做了什么事情？
1.主要功能是将路由对应的组件打包成js代码块。
2:只有访问这个路由才会加载相应的组件，否则不会加载！
也就是只有当这个路由被访问时，才会加载相应的组件，否则，不会加载！
1:.如何实现路由懒加载？？
vue项目中实现路由按需加载(路由懒加载)有三种方式：
1: vue异步组件
2: ES6标准语法导入()——推荐！
3.要求，确保()共3个：webpack
2.Vue异步加载技术
1.vue-Router配置路由，使用vue的异步组件技术，可以实现懒加载。这时，一个组件会生成一个js文件。
2:component:resolve=require([ put routing address to loaded ]，resolve)
{
路径：“/problem”，
名称：“问题”，
组件：resolve=require([./pages/home/problemList]，解决)
}
3.ES6推荐方式imprort ()----推荐使用
1.直接引入组件的方式，import是ES6的一个语法标准。如果需要浏览器兼容性，需要转换成es5语法。
2:推荐这种方法，但是要注意wepack的2.4版本。
3.在3:vue的官方文档中也使用了import来实现路由的懒加载。
4:上面声明进口，下面直接使用。
从“Vue”导入Vue；
从“vue-router”导入路由器；
//官网知道：下面没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo=()=import(./components/Foo’)
const Aoo=()=import(./components/Aoo’)
//下面2行代码，指定了相同的webpackChunkName，将合并打包成一个js文件。
//const Foo=()=import(/* webpackChunkName: ImportFuncDemo */./components/Foo’)
//const Aoo=()=import(/* webpackChunkName: ImportFuncDemo */./components/Aoo’)
导出默认新路由器({
路线：[
{
路径：“/Foo”，
姓名：福，
组件：Foo
},
{
路径：“/Aoo”，
名称： Aoo ，
组件：Aoo
}
]
})
4.webpack提供的require.ensure()实现懒加载：
1: Vue-router配置路由，并要求确保webpack技术也可用于按需加载。
2:在这种情况下，具有相同chunkName的多个路由将被组合并打包到一个js文件中。
3.require.ensure可以按需加载资源，包括js、css等。他将把需要的文件单独打包，而不是和主文件一起打包。
4:第一个参数是一个数组，表示第二个参数中需要依赖的模块。这些会提前加载。
5:第二个是回调函数。在这个回调函数中，require文件将被单独打包成一个块，而不会与主文件打包在一起。因此，生成了两个块，第一次只加载主文件。
6:第三个参数是错误回调。
7:第四个参数是单独打包的块的文件名。
这里的代码指的是原文链接：https://blog.csdn.net/qq_41998083/article/details/109726402.
从“Vue”导入Vue；
从“vue-router”导入路由器；
const HelloWorld=resolve={
require . assure([ @/components/hello world ]，()={
resolve(要求( @/components/HelloWorld ))
})
}
Vue.use(路由器)
导出默认新路由器({
路线：[{
{路径：。/,
名称：“HelloWorld”，
组件：HelloWorld
}
}]
})
4.import和require的比较（了解）
1:导入是一个解构过程，在编译时执行。
2: require是一个赋值过程，在运行时执行，即异步加载。
3.require的性能略低于import，因为require在运行时引入模块，同时也给变量赋值。
至此，已经介绍了VueRouter惰性加载的基本知识和使用方法。逻辑很简单，关键在于实践。感谢观看！
总结
这就是本文关于vue路由器路由的三种惰性加载和实现方式。关于vue-router路由的延迟加载的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。