108-尚硅谷-尚品汇-路由懒加载

好，各位同学，那咱下午呢，把前台下午的收尾的工作呢给他做好。呃，接下来咱们要讲另一件事，就是路由。问，啊，路由相关的。在这这是第几个，我看一下。是第几个五，第六。陆游家长。叫路由懒加载。其实在咱们关于读当中啊，进阶部分咱学了几个，第一个。守卫。第二个滚动行为。第三个路由源信息，还有一个叫路由懒加载。朱老师这是什么呀，那咱们呢，稍微咋的。看一下。这个网啊。联网联网，稍微等一下。

这怎么进哪都进不去呢？走。好了，这个咱们的三位下的BB。搜一下来读读这啊。那关于路由相关的是不是在这儿叫will router？在他的指南当中，在最底下这里有一个地。路由懒加载。哎，老师，你在上午学的什么来着？铜片的懒加载对吧，下午又出现个路由懒加载，咱稍微读读。看。当打包构建应用时，我问你这要准备干什么呢？打包上线了。对不，GS的包会变的非常大。其实咱那时也看，其实也还好啊。影响页面加载，老说你，他这句话存在的含义是什么？

就是你打包的时候啊，你GS包大了是不是影响。页面加载。这句话能读懂吗啊？如果我们能把不同的路由。谁让咱是不是写无类的？对不index.js和ru.js对吧。如果我们能把不同的路由对应的组件分割成啥？不同的代码块。然后当路由被访问的时候，才加载对应的组件，这样就高效，你说这句话对不对？就是当你访问这个组件的时候，我是在加载，你不问我不加载。这不很像咱当年饿了么UI那啥按需引入。诶，对不对，对吧，那咱们看一下它底下的一个写法啊，看这你先不用看这看这。来看这儿。

在VAPA2。我们可以使用动态的port的语法来定义代码画。他是不是用到了引号，但你看学宫。哎，老师问你啊，你说他在干一件什么事？我说你咱以前的引胖子是怎么玩的？Import a from b。Import a.GS你从来没有怎么玩过？引号的加谁小括号，而且这里面引的是个组件。那你看他法国的是一个啥。Price。对，不但是这种写法大应该写过吗？从来没有。对，不，但是可不可以这么写，可以。那咱们看一下了，他说最终的代码可以写成什么样，就是按需引入组件啊，你看他可以这么写，老师问你能不能看懂。你看它定义了个啥。

你先不用看后面我给你定一个什么鬼，是不是箭头函数，箭头函数反回的是什么，是一个。诶，对不对，对吧，那你看他在路由注册的时候，他是怎么玩的，你看这是咱当年注册路由的地儿，你自己看。Complement，他写的是啥？写的是这个箭头函数的函数名。当访问这个路由的时候，这个函数才会的。调用返回这个组件。最能看懂。能不能能买，所以说路由懒加载的一个好处是什么？老师把这句话给你放在这儿。这句话能理解，不剩下就只不过就是语法的问题。老师呢，找到路由的地方啊，在哪，是不是在这。这不咱全全咱写的路吗。老师把这句话先给你放在这儿，床拿过来，哎呀。

这样的话咱换个拨号。吧，对吧，计划老师给你发在这。但是路由懒加载，其实这句话主要的是啥，说后边这几句话。啊，走。自己在细细的品品。如果我们能把不同的路由。对应的组件分割成不同的代码，然后主要是这句话。然后当路由被访问时，才加载相应的组件，我问你这玩意是不是高效更高效一些，说白了按需在哪里？比如。总是这个道理，你需要的时候，就是你访问的时候，你需要的时候是不是才加载这个组件，你不需要的不加。这不跟咱当年饿了么UI那个爱趣引入是不一样套路。但是他的语法有点怪。就是咱们以前引路游怎么引，咱就举个例子后。以前是不是这么？但是你看人家这回怎么考怎么考。

可让。它是不是定义了一个函数？咱先按照人类来，是不是叫foo？是一个箭头。箭头来，老师你再写全了，它是不是回一个promise。是不是挺好玩的？Return，谁是in part，咱拿home说话，那应该是啥at杠？Views下的后是不是这么玩？咱找到谁找到home你看啊，效果是一样的，后表应该在最底下了吧。长下后这呢，你看吧，因为这他写的是谁。Foo，咱们先验证一件事，你看哎，是这么形吗？是吧？Fo，你看这个函数什么时候才能调用。老师在这给你打一句话。Cons第二，LOG11111。OK吧，你看，而且他这玩意挺好玩的，你看看这现在老师。

访问的是不是注册。你看加载。加载后的没有，我点击登录加载了。我没有，你看我只要一访问。后你看。对不对。是不是当访问的时候，是不是才加载。这能懂不？老师说你他跟咱以前的写法有什么不同？你这么写代表着。你上来是不是直接引这个组件，是不是直接引了。我就不管你用没用，老师问你是不是直接会直行，这里边代码就直行谁啊这个后这种总工，而他是什么时候才会执行。用户访问的时候才会调用说返回这个组件。这能走？当然，你说这种写法能不能简化一下？我问你这个是谁？

箭头函数。说白了是不是右侧。那右侧这里能不能再减了。函数体区的。取的对不对。那老师你fo是谁，就他？他直接打。扔回来。这能看懂。能看到，但是你要注意这个电脑函数什么时候执行。当用户访问的时候会执行一次，而且访问相应的组件。所以以后你工作的时候，你会发现，诶，人家引组件的时候都是在引引。陆游乱加载。OK，不？这个能够看懂，当然。咱最好是把所有全打了。全懒加载一下，但老师不想做。好不？这个可以不？可以吧，因为这个这个说实话有点的。有点多。

这能懂不？那当然这里面是不是全都可以干掉？这里面都可以替换成刚刚的，这咱再找一个吧。咱再找找个设置。来色程。应该是太。你看人家找的准。有一说一啊，这老师因为咱最开始不是写了四个，所以money，那举个例子，以后人家引组件还用这么引吗。不用了，Say，拜拜了。眨眼。直接是不是这直接写一个箭头函数，箭头函数返回的是不是一个promise，就是那个组件嘛，Inport谁at-wills下谁search不是。所以以后引组件的时候都是这么。OK，不就不会像以前这一个一个一个直接。OK。那老师最后再问一下路由懒加载的好处是啥？

俩字，够呛。对不？对吧，所以这话我能。可以吧，好嘞。