什么是前端路由

前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等。这篇文章主要和大家谈谈什么是前端路由,以及它的使用场景及优缺点
1.什么是路由
简单举例说明,假如我们有一台提供 Web 服务的服务器的网络地址是:10.0.0.1,而该 Web 服务又提供了三个可供用户访问的页面,其页面 URI 分别是:

http://10.0.0.1/
http://10.0.0.1/about
http://10.0.0.1/concat
那么其路径就分别是 /,/about,/concat。
当用户使用 http://10.0.0.1/about 来访问该页面时,Web 服务会接收到这个请求,然后会解析 URL 中的路径 /about,在 Web 服务的程序中,该路径对应着相应的处理逻辑,程序会把请求交给路径所对应的处理逻辑,这样就完成了一次「路由分发」,这个分发就是通过「路由」来完成的。
以前路由都是后台做的,通过用户请求的url导航到具体的html页面,前端路由就是通过配置js文件,把这个工作拿到前端来做。
简单的说,路由是根据不同的 url 地址展示不同的内容或页面

2.前端路由

前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的。在 HTML5 的 history API 出现之前,前端的路由都是通过 hash 来实现的,hash 能兼容低版本的浏览器。如果我们把上面例子中提到的 3 个页面用 hash 来实现的话,它的 URI 规则中需要带上 #。

1 http://10.0.0.1/
2 http://10.0.0.1/#/about
3 http://10.0.0.1/#/concat

Web 服务并不会解析 hash,也就是说 # 后的内容 Web 服务都会自动忽略,但是 JavaScript 是可以通过 window.location.hash 读取到的,读取到路径加以解析之后就可以响应不同路径的逻辑处理。
history 是 HTML5 才有的新 API,可以用来操作浏览器的 session history。基于 history 来实现的路由可以和最初的例子中提到的路径规则一样。

1 http://10.0.0.1/
2 http://10.0.0.1/about
3 http://10.0.0.1/concat

具体如何实现前端路由将在后面的文章中介绍。

3.前端路由的使用场景?
前端路由更多用在单页应用上, 也就是SPA, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由。

4.前端路由优缺点

优点:
1.从性能和用户体验的层面来比较的话,后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。
2.在某些场合中,用ajax请求,可以让页面无刷新,页面变了但Url没有变化,用户就不能复制到想要的地址,用前端路由做单页面网页就很好的解决了这个问题
缺点:

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

原文地址:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/8297615.html

时间: 2024-10-05 05:17:28

什么是前端路由的相关文章

利用JS实现前端路由

在以前的web程序中,路由字眼只出现在后台中.但是随着SPA单页面程序的发展,便出现了前端路由一说.单页面顾名思义就是一个网站只有一个html页面,但是点击不同的导航显示不同的内容,对应的url也会发生变化,这就是前端路由做的事.也就是通过JS实时检测url的变化,从而改变显示的内容. 目前很多前端框架都有接口去实现路由,比如vuejs的vue-route等.我们可以利用原生的hashchange事件来模拟一个简单的路由. 实例的html代码: Document index news about

Web开发中 前端路由 实现的几种方式和适用场景

浅析Web开发中前端路由实现的几种方式 主题 Web开发 故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因- 叙事体故事讲完,

自己动手写一个前端路由插件

在单页应用上,前端路由并不陌生.单页应用是指在浏览器中运行的应用,在使用期间页面不会重新加载.       基本原理:以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生改变时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示.       基于hash的前端路由优点是:能兼容低版本的浏览器. history 是 HTML5 才有的新 API,可以用来操作浏览器的 session history (会话历史). 

前端路由和后端路由

前端路由的典型:ng-route,后端路由典型:express (结合模板,返回的是html文件,感觉模板略像jsp,没有分离) 前端路由根据不同的url展示页面,服务端根据 url 的不同返回不同的页面实现的.在单页面应用,大部分页面结构不变,只改变部分内容的使用 优点 用户体验好,不需要每次都从服务器全部获取,快速展现给用户 缺点 使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存 单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置 由于单页Web应用在一个页面

原生JS实现一个简单的前端路由(原理)

说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例, 当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示. 直接看代码或许更直观. 1 function Router() { 2 this.routes = {}; 3 this.currentUrl = ''; 4 } 5 Router.prototype.route = function(path, callback) {

浅析Web开发中前端路由实现的几种方式

故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因… 叙事体故事讲完,进入正题.首先,我们知道传统而经典的Web开发中,服务器端

前端路由的原理

什么是路由?简单的说,路由是根据不同的 url 地址展示不同的内容或页面 使用场景?前端路由更多用在单页应用上, 也就是SPA, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由. 前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的.在 HTML5 的 history API 出现之前,前端的路由都是通过 hash 来实现的,hash 能兼容低版本的浏览器. 两种实现前端路由的方式HTML5 History两个新增的API:history.pushState 和

通过hash实现前端路由

router.js //构造函数 function Router() { this.routes = {}; this.currentUrl = ''; } Router.prototype.route = function(path, callback) { this.routes[path] = callback || function(){};//给不同的hash设置不同的回调函数 }; Router.prototype.refresh = function() { //console.l

原生 js前端路由系统实现1

在看了百度手机小说网站源码之后  突然兴起想自己实现一个基于网页hash技术的路由系统 源码 我放到oscgit上面了 地址: https://git.oschina.net/diqye/route.js 适用场景: 局部刷新页面    通过ajax局部刷新页面会有一个问题就是 分享url或者刷新页面时不能记录 当前网页的状态  前端路由可解决这个问题 期望的路由: 1  当访问网页 http://localhost/index.html 或者 http://localhost/index.ht

前端路由 or 后端路由

关于这个问题,无论是平时工作中,还是业余学习中,都有过思考.到底什么样的项目适合前端路由,什么样的项目适合后端路由?可能我目前的想法还很稚嫩不成熟,欢迎吐槽. 首先需要明确的是,无论前端还是后端路由,我们看到的 URL 都是马甲,需要通过路由触发/执行真实需要执行的逻辑路径. 先说前端路由,很重要的一点是 页面不刷新,和后端采用 ajax 交互,实际生产中多用在 单页应用 中.举个例子,webapp 一类就比较适合用前端路由,页面不刷新使得交互友好(毕竟移动端请求还是挺耗时的),另外,单页应用通