前端路由优缺点以及实现

本文已被阅读过 Posted by Liao Can on 2017-03-27

前言

ssm时代,多页面时代,需要页面渲染模板,如 freemark,jsp 等模板引擎。前后端没有分离时,路由是由后端处理的,浏览器接收到 .do .action的请求,传到后台对应 spring mvc 会进行逻辑处理返回对应的页面,实现路由的分发 return **.jsp 或者 return modelandview对象,封装了实体数据和视图渲染的模板
单页应用时代,只有一个html加载,所有页面都是通过js来改变页面元素,前后端分离,减轻服务器端压力,路由需要前端自己的实现

前端路由优缺点

优点

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

缺点

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

前端路由实现

页面路由

特点:会重新刷新页面,browserHistory

1
window.location.href='http://www.baidu.com' history.back();

hash路由

特点:不会刷新页面,不能跳转其他路径,只会在当前路径后面拼上#/test/sss hash就是#后面的路径浏览器不会解析,可以通过hashchange来进行操作hashHistory

1
2
3
window.location.href='#/test/sss' 
window.location.href='#test' window.onhashchange = function(){
console.log('current hash:', window.location.hash); }

上面路由都可以用a便签来跳转

h5路由

特点:可以在同源下其他路径跳转 优于#路由,可以操作路径也可以操作hash 但是兼容不好

1
2
3
4
5
6
7
8
9
10
11
12
13
window.history.putState(data,title,url) //可以是绝对路径 或者是相对路径  新增当前路径到历史栈   
window.history.replaceState(data,title,url) //替代当前路径 不会刷新 把他替代历史栈的位置
onhashchange事件
window.onpopstate= function(e){console.log('h5:',e.state)} //后退时触发
window.onpopstate = function(){
console.log(window.location.href);
console.log(window.location.pathname);
console.log(window.location.hash);
console.log(window.location.search);
}
window.history.back()
//不能跨域
Uncaught DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://www.baidu.com/sss' cannot be created in a document with origin 'https://www.baidu.com' and URL 'https://www.baidu.com/'.at <anonymous>:1:16

支付宝打赏 微信打赏

赞赏一下