vuerouter路由懒加载,vue3路由懒加载
本文主要介绍vue路由的延迟加载。在应用打包构建的时候，JavaScript包会变得非常大，影响页面加载。这就是vue路由的懒加载。接下来，进入边肖的文章，了解更多细节。
:
目录
1.什么是路由2的懒加载？路由延迟加载的使用。
1、什么是路由懒加载
官方的解释：
在应用打包构建的时候，JavaScript包会变得非常大，影响页面加载。
如果能把不同路由对应的组件分成不同的代码块，然后在访问路由时加载相应的组件，效率会更高。
官方想表达的意思
首先，我们知道路由中通常定义了许多不同的页面。
这个页面最后会打包到哪里？一般会放在js文件里。
但是页面那么多，所有文件都放在一个js文件里，必然会导致页面非常大。
如果我们一次性向服务器请求这个页面，可能需要一些时间，甚至用户的电脑会出现短时间的空白。
如何避免这种情况？就用路线懒人装。
路由懒加载做了什么
懒加载的主要作用是将路由对应的组件打包成js代码块。
只要访问这个路由，就会加载相应的组件。
2、路由懒加载的使用
在使用之前，我们先来看看原始代码是如何加载路由的。
从“Vue”导入Vue；
从“vue-router”导入VueRouter
从“@/views/Home”导入个人主页；
从“@/views/About”导入“关于”；
从“@/views/User”导入用户；
vue . use(vue router)；
常量路由=[
{
路径：“/”，
姓名：家，
成分：家，
},
{
路径：“/about”，
名称：“关于”，
组件：关于
},
{
路径：“/user/:userId”，
姓名：用户，
组件：用户
}
];
我们可以看到，我们从一开始就导入了与路线相对应的组件。如果有大量导入的组件，页面加载会相对较慢。我们来看看这样打包的文件。
我们可以看到只有两个js文件是这样打包的。当我们加载页面时，我们需要在页面显示之前加载所有这两个文件。如果代码量太多，页面响应会很慢，用户体验会很差。
接下来我们使用路由懒加载
从“Vue”导入Vue；
从“vue-router”导入VueRouter
vue . use(vue router)；
//添加路由懒加载代码。
const Home=()=import(./views/Home’)
const About=()=import(./views/About’)
const User=()=import(./视图/用户’)
常量路由=[
{
路径：“/”，
姓名：家，
成分：家，
},
{
路径：“/about”，
名称：“关于”，
组件：关于
},
{
路径：“/user/:userId”，
姓名：用户，
组件：用户
}
];
我们可以看到路由配置中什么都不需要改变，照常做就行了，只需要在这之前声明一个变量，在变量中使用箭头函数来导入相应的组件，使用起来非常简单。
使用路由懒加载的方式打包出来的文件结构如下：
我们可以看到比原来的方式多了三个js文件。这是因为上面代码的三个组件使用了路由延迟加载。这三个js文件只有在访问路由时才会加载，能省下不少的加载时间
因此，我们更喜欢使用惰性加载方法来加载路由。
关于vue懒加载细节的这篇文章到此为止。关于vue懒加载的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。