这篇文章可以入选评委评选的最佳手记吗？期待ing…
✔(15) 2-12 生命周期函数的新写法 ✔(16) 2-13 Provide,Inject,模版 Ref 的用法 ✔(17)3-2 VueCLI 的使用和单文件组件（1） ✔(18)3-3 VueCLI 的使用和单文件组件（2） ✔(19) 3-4 使用单文件组件编写 TodoList ✔(20)3-5 Vue-Router 路由的理解和使用（1） ✔(21)3-6 Vue-Router 路由的理解和使用（2） |
|
我们始终围绕是什么+为什么+怎么用 来输出所学收获 （1）是什么： import 这种语法叫做一个懒加载的语法，异步加载路由 （2）怎么玩： 写法参考demo示例。 |
|
主要内容：----------------------good start----------------------
还有一个问题要给大家解答:
我们可以看到上面 路由的配置里面，当访问根路径的时候直接就展示Home组件，
而下面为什么会有一个import这样的语法，【第19行】
实际上 import 这种语法叫做一个懒加载的语法，或者叫做异步加载路由。
什么意思？
回到页面上刷新。
比如说我现在在首页，我点开控制台：
点开 Network，然后清一下，然后选中 All这个选项。
当我点击About的时候:
大家看 about路径 ta用了这种异步加载的一个写法，当我点About的时候，
大家可以看到这个时候它会加载about点js这块的代码，
异步加载路由的意思是什么呢？
About页面，一开始当我进到Home这个页面的时候，实际上没有必要加载About页面的代码，
只有当我跳转到About页面的时候，才需要去把About页面的代码加载过来，
那么这个时候我们就可以用异步的这种import的写法去加载 About组件的代码，它可以做到什么呢？
这种写法可以做到，当我访问首页的时候，我并不会去加载About页面的代码，而只有你访问About页面的时候，我才会去加载About页面的代码，
没用的一些代码，如果我们访用访问不到的一些页面的代码，一开始我是可以不加载的，
只有你真正访问到这个页面的时候，我再去加载这样的代码，想要做到这一点，就得使用这种import这样的一个异步的语法了。
比如说像Login这种语法:
我并没有使用import对不对？直接写了组件，那就会有一个什么样的问题?
这种语法写出来的代码，一开始我虽然在首页，我刷新的时候在首页:
但是这个时候实际上你Login的代码也已经被下载下来了，你点Login你会发现它不会加载额外的任何代码:
也就是说当你访问首页的时候，虽然你现在用不到Login，但是你把Login的代码其实已经下载到你的浏览器的本地了，
这样做，
实际上在这个页面做加载的时候，
只访问首页的时候，
它是多加载了很多没有必要加载的内容的，
所以有的时候我们去写路由的时候，我们可以通过这种异步的写法去降低我们首屏需要加载代码的量，
让我们的首页或者说第一个访问的页面打开的速度更快。
但是如果你通过这种异步加载代码的方式，比如说用了这种import的语法，也会带来额外的一个问题就是说，
比如你现在在首页当你跳到About页的时候，它要去加载about点js，
然后再展示页面，
所以页面跳转的时候可能速度会有一些慢，会有一些卡顿，
所以这也是它所带来的一个不是特别好的点，
到底使用这种同步的路由，直接写这种路由，还使用异步的路由，
还是要根据大家的项目的具体要求来做。
比如说我们写一个后台项目，
页面之间切要求不是特别高，可以有一点卡顿，我们就可以使用这种 import异步的路由加载的这种方式，
而比如说你做一个C端很小的项目，它其实总共的代码量就没有多大，那么你做这种同步路由的方式也没有任何的问题，
它会让你切换页面的时候速度可能会更快一些，
具体怎么选择，大家可以根据自己的项目来去使用，适合于你的方式。
热门评论
-
只是为了好玩2022-11-14 0
查看全部评论编程技能的提升没有捷径, 需要你不断的刻意练习和刻意思考。