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

2022/11/15 4:24:02

本文主要是介绍【金秋打卡】第21天 vue基础入门(下)| (21)3-6 Vue-Router 路由的理解和使用(2),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

模块名
描述
课程名称
前端工程师2022版
课程章节
vue基础入门(下)
打卡知识进程
知识进程:21 / 21
✔(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)
主讲老师
Dell
学习开始时间
2022.11.14 07:13
学习结束时间
2022.11.14 08:17
总计时
64 min
课程收获

我们始终围绕是什么+为什么+怎么用
来输出所学收获
(1)是什么:
import 这种语法叫做一个懒加载的语法,异步加载路由
(2)怎么玩:
写法参考demo示例。
学习感受/感想/领悟(心得)
渐入佳境 +5

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

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



这篇关于【金秋打卡】第21天 vue基础入门(下)| (21)3-6 Vue-Router 路由的理解和使用(2)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程