前端路由原理

1、为什么前后端分离

    前后端通过ajax调用http请求接口,获取json数据,需约定好数据格式,前后端分别部署,是两个工程

    前端和后端开发人员的分工明确,利于他们的术业专攻,不然的话,前后端对接容易出错

    不分离的话,后端服务器压力太大,性能不好,用户体验差

    好处:前后端分工明确,提升开发效率;使用前端服务器,整体响应速度块,用户体验好;减少后端服务器压力,防止宕机等现象。

2、前后端路由的区别

    路由就是根据不同的url展示不同的页面或内容,研究室url到函数的映射

    后端路由:每次路由跳转都会请求html页面,项目过大时,请求时间长,容易白屏,用户体验差

    前端路由:项目使用期间,路由跳转,页面不刷新,不重新加载,简单说就是更新视图但不重新请求页面;根据不同的url,跳转到不同的锚点,显示不同的内容;缺点,使用浏览器的前进、后退时,会刷新页面,没有合理利用缓存;单页面应用前进、后退时,无法记住滚动位置。优点,用户体验好,因为不用每次去请求页面;前后端分离开发,开发效率高

3、vue路由原理

    hash模式:每一次改变hash(window.location.hash),都会在浏览器访问历史中增加一个记录。window.addEventListerner("hashChange", () => {}, false)

    history模式:History interface是浏览器历史栈提供的api接口,通过back() go() forward()等方法,读取浏览器历史栈中的记录,进行各种跳转工作。H5中新增PushState()和ReplaceState()等接口,可以对浏览器历史栈进行操作。window.addEventListener("popState", () => {}, false)

    区别:popState设置的新url可以原url不同源,二hashChange只能改变#后面的部分;pushState(stateObject,title,URL)  popState可修改的stateObject类型较多,而hashChange只能是短字符串;popState还可以携带title,待后续使用;popState设置的新旧url可以不一样,页面也会触发跳转,二hashChange必须不一样才能跳转;history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,不然会404,需后端配合配置(配置try_files $uri $uri/ /index.html;)。

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

推荐阅读更多精彩内容

  • 什么是路由 简单的说 路由就是根据不同的url地址展示不同的内容或页面 使用场景 前端路由更多的是用在SPA,因为...
    Wang_Yong阅读 1,672评论 0 0
  • 本篇文章主要介绍前端路由相关的文章。在稍微复杂一点的SPA,都需要路由,vue-router也是vue全家桶的标配...
    雪燃归来阅读 281评论 0 3
  • SPA 中前端路由原理与实现方式 通常 SPA 中前端路由有2中实现方式,本文会简单快速总结这两种方法及其实现: ...
    faremax阅读 851评论 0 1
  • 随着前端应用的业务功能起来越复杂,用户对于使用体验的要求越来越高,单面(SPA)成为前端应用的主流形式。大型单页应...
    指尖跳动阅读 1,398评论 0 0
  • 关于路由 路由其实是根据不同的URL地址展示不同的内容或页面;广义上来说,访问路由会映射到相应的函数里,然后由相应...
    hellomyshadow阅读 1,943评论 0 0