本文主要介绍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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。