【金秋打卡】第21天 vue基础入门（下）| (21)3-6 Vue-Router 路由的理解和使用（2）

这篇文章可以入选评委评选的最佳手记吗？期待ing…

主要内容：
----------------------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端很小的项目，它其实总共的代码量就没有多大，‍‍那么你做这种同步路由的方式也没有任何的问题，
它会让你切换页面的时候速度可能会更快一些，‍‍

具体怎么选择，大家可以根据自己的项目来去使用，适合于你的方式。‍‍