什么是前端路由

前端路由在很多开源的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没有变化,用户就不能复制到想要的地址,用前端路由做单页面网页就很好的解决了这个问题 缺点:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静下来

增加wordpress可以上传.torrent文件

今天想上传个文件,是.torrent后缀的。。就是种子,为什么要上传,咱就不说了。。。wordpress本身是不支持上传.torrent文件的,不过我们可以用代...

3395
来自专栏前端知识分享

第107天:Ajax 实现简单的登录效果

Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术。这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载...

1111
来自专栏性能与架构

Linux 非交互式SSH

ssh是linux管理时常用的一个服务,ssh有个特点,属于交互式操作,就是当你执行ssh时,他会要求你手动输入密码 这就给shell脚本带来了麻烦,如果想在...

4607
来自专栏Linux运维学习之路

ansible批量管理软件部署及剧本

服务器版本信息: Centos6.9 [root@db02 ~]# uname -a Linux db02 2.6.32-696.el6.x86_64 #1 S...

9597
来自专栏WindCoder

windows下python中pip与easy_install相关

下载地址:https://pypi.python.org/pypi/ez_setup

1111
来自专栏开发技术

将tomcat添加为linux系统服务

  在博客 --》virtualBox安装centos,并搭建tomcat中,讲到了centos下搭建tomcat环境,发现启动tomcat不是那么方便,要是忘...

1642
来自专栏移动端周边技术扩展

Vue.js学习笔记(1)

941
来自专栏北京马哥教育

73条日常shell命令汇总,总有一条你需要!

1.检查远程端口是否对bash开放: echo >/dev/tcp/8.8.8.8/53 && echo "open" 2.让进程转入后台: Ctrl + z...

37111
来自专栏SpringBoot 核心技术

第十四章:QueryDSL与SpringDataJPA共同服务于SpringBoot

4214
来自专栏pangguoming

Angular CLI 使用教程指南参考

Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本.

1004

扫码关注云+社区

领取腾讯云代金券