vue-router history模式的实现原理

        各位客爷大家好,疫情已经肆虐了我们大半年的时间了,不知各位有没有在这个非常时期逆流而上找到自己心仪的工作呢~

        在下今天主要来和各位一起讨论一下vue-router history模式的实现方法

        一,经典案例

        事情的起因还要追溯于近期的一次提测,切换场景(一个真实的case,如果您只想get干货可以越过人生分割线来忽略):

        ———————————————  人生分割线    —————————————————

        我司的后台系统使用vue+vue-router这种技术栈来实现,由于业务需求较多,这些页面也就多到左侧菜单栏无法承载的地步,所以我们每个人可见的左侧显示菜单,都是通过一个权限系统配制而成的。

大概是长这个样子吧

        左侧的菜单栏点击链接之后跳转方式是window.location.href,这次我们重构将之前的hash模式改为了history模式,但是问题来了:

        由于之前系统一直是以hash模式url跳转,所以后台配置的路径一直是hash试的全路径,例如:

                http://XXX.com/#home

                http://XXX.com/#list

        但是当我们改为了history模式之后(http://XXX.com/list),问题出现了,每一次页面跳转都造成了页面刷新。

        我在这个跳转逻辑里发现其实之前其实是有history模式的兼容的,只要从后台配置的路径不是全url路径,是一个path的话,那就会使用vue-router的push方法跳转,于是这个问题算是解决了。但是当我们组妹子娇娇问我为什么之前使用全路径都OK的时候,我只是回复了她一句因为之前是hash模式,如果换位思考的话,我对这个回答并不满意,因此我想通过这篇博文整体解释一下为什么之前使用hash模式可以,但是history会出现问题。

        ————————————————  人生分割线    ————————————————

        二,原理分析

        终于要上干货了,我们来针对这几个问题一一分析:

        1,为什么之前hash模式,菜单配置全路径页面跳转不刷新?

            根据http协议所示,url中hash改变请求是不会发送到服务端的,不管你怎么location跳转,或者url上直接加上hash值回车,他都一样固执,就是不和服务器老大说。

            但是我们的系统里又引入了vue-router,其中hashchange这个事件监听又监听到了hash的变化,从而触发了组件的更新,也就绘制出了相应的页面。

        2,为什么换成history模式,每次点击菜单的导航都会页面刷新?

            首先我们来看一下一个正确的history模式下,首页刷新到显示的整体流程:

                1,将这个完整的url发到服务器ng

                2,ng需要配置用这个uri再指给给前端index.html(这里我插一句哈,为什么要这么做呢,因为根本没有任何一个服务器提供了这个url路由,如果直接访问的话就是404,所以需要指回给前端,让前端自己去根据path来显示)

                3,此时ng将这个请求指向了前端index.html,index.html中开始加载js,js中已有vue-router的代码,vue-router自动触发了popstate这个事件,在这个事件回调中,绘制了这个path下对应的页面组件

            接着我们再来看一下vue-router push方法的页面跳转流程:

                1,vue-router调用push方法首先会使用pushstate变换页面url(仅仅变化url,页面不变)

                2,紧接着根据push方法中传入的params找到对应的组件【页面】

                3,载入对应页面组件,跳转完毕

            【划重点】vue-router的push跳转或者replace跳转是不需要请求服务器的!

            但是我们如果使用window.location.href来做这个页面跳转,就基本上和web1.0没什么区别,一定会先请求到服务器,再由服务器下发资源,导致页面刷新~

            讲到这里我想妹子和我的困惑也都迎刃而解了,最近也有面试过一些前端,简历上也都有写搞过vue-router的history模式,配置ng之类的,但是当我问为什么配上ng就可以正常访问了,或者说ng是怎么实现页面正常访问的,基本上都能刷下一大波,在下认为搞技术的话一定要有敬畏之心,做项目要严谨,不能浅尝辄止#@$!^$#&%.....

            如果各位还想听在下聊聊vue-router中使用的pushState方法的话,请越过下面的涨芝士分割线,如果已经对这部分了如指掌的话,那么就祝您找到自己称心的工作了

        ————————————————  涨芝士分割线    ————————————————

        三,知识点讨论

            在下刚开始用 vue-router 的时候就好奇,为什么$router跳转页面的时候api是push,这分明是一个数组的方法嘛~但是后来在下阅读了vue-router的源码,发现犹大是用了pushState来做纯前端的页面跳转,在下不禁拍了下大腿,我*高招啊。

            这个pushState单纯的做了一个url的变化,并且在路由队列里加上了这条新的url的记录,所以如果您在page1页面使用了pushState这个方法,页面不会变化,只是浏览器地址栏会发生更新,且浏览器的回退按钮变成了可点击状态!

            所以,犹大在使用pushState将url改变之前,先做了页面组件的刷新,也就模拟出了页面跳转的样子。

            那么,如果我刷新首页,又或者前进后退,怎么再更新页面组件呢?答案就是使用popstate来做事件监听,当用户首次访问,前进或后退的时候,都会触发popstate事件,再由popstate来做当前页,上一页等页面的记录和绘制。

—————————————————  涨芝士分割线  —————————————————

        今天就聊到这了,最近疫情北京又变中高风险地区了,本来和老婆打算去玩个迪士尼来庆祝下一周年,看来也泡汤了。最近公司组织架构调整,我们部门在风波中也被撕扯分裂到了各个新项目组,之前一起并肩奋斗的小伙伴也走了一小半,但是至少,我们还有张照片~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349