美文网首页
前端路由的原理

前端路由的原理

作者: Wang_Yong | 来源:发表于2018-12-28 17:09 被阅读0次

什么是路由

简单的说 路由就是根据不同的url地址展示不同的内容或页面

使用场景

前端路由更多的是用在SPA,因为单页面应用都是前后端分离的,后端自然也不会给前端提供路由
前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的。在html5中的hisstory Api 出现之前,前端的路由是通过hash来实现的,hash能兼容低版本的浏览器、

两种实现前端路由的方式

H5中两个新增的api history.pushState 和 history.replaceState两个Api都会操作浏览器的历史记录,而不会引起页面刷新。
Hash就是url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location 处理哈希的改变时不会重新渲染页面,而是当作新页面加到历史记录中,这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。

优点

从性能和用户体验的层面来比较的话,后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。

缺点

使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存。

相关文章

  • vue - 路由模式

    1 路由的基本概念与原理 路由的本质就是对应关系; 在开发中, 路由分为前端路由和后端路由. 1.1 前端路由 概...

  • vue基础-路由(重要)

    前端路由的概念与原理 什么是前端路由 Hash 地址与组件之间的映射关系,前端路由可以将hash地址和组件关联起来...

  • 前端路由原理和React Router

    前端路由原理 前端三大框架 Angular、React、Vue ,它们的路由解决方案 angular/router...

  • vue-router

    前端路由的基本原理 vue-router的基本使用 命名路由 路由参数 嵌套路由

  • 面试:谈谈对前端路由的理解?

    面试官想听到什么答案呢? 1、为什么会出现前端路由。 2、前端路由解决了什么问题。 3、前端路由实现的原理是什么。...

  • 前端路由实现

    前端路由 前端路由实现原理,就是根据不同的 url ,在页面上显示相应的内容。 hash 浏览器 url 变化时,...

  • 前端路由

    什么是前端路由 前端路由的前生今世及实现原理 先有的SPA,页面内部交互无刷新,再到页面跳转也无刷新,因此路由出现了

  • 前端路由的简易实现

    前端路由实现前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例,当 ur...

  • 第九天面试题

    Vue路由的实现原理 ❤ 更新视图但不重新请求页面,是前端路由原理的核心之一 1,利用URL中的hash("#")...

  • 前端路由原理

    前端路由原理 ======== HashChange 事件 通过监听hasgchange事件,判断location...

网友评论

      本文标题:前端路由的原理

      本文链接:https://www.haomeiwen.com/subject/yngrlqtx.html