• 【Vue】Vue-Router 路由的理解和使用(2)


    ‍还有一个问题要给大家解答:

    我们可以看到上面 路由的配置里面,‍‍当访问根路径的时候直接就展示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端很小的项目,它其实总共的代码量就没有多大,‍‍那么你做这种同步路由的方式也没有任何的问题,
    它会让你切换页面的时候速度可能会更快一些,‍‍

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

  • 相关阅读:
    京华烟尘歌
    228 基于matlab的神经网络人脸识别
    @Async使用记录
    wu-framework-parent 项目明细
    Java进公司首先要做的准备工作-maven、idea、Tomcat安装和配置
    mac环境安装多个node版本(可切换)
    Nacos服务发现数据模型
    SMART PLC飞剪控制算法
    Kafka消息队列
    亚马逊美国站TEMU跳舞毯CPC认证检测项目分析
  • 原文地址:https://blog.csdn.net/YJG7D314/article/details/127826953