vue动态路由懒加载,vuerouter路由懒加载

vue动态路由懒加载,vuerouter路由懒加载,vue 路由懒加载详情

本文主要介绍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懒加载的更多信息,请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们!

vue动态路由懒加载,vuerouter路由懒加载