[前端] 前端路由优缺点以及实现

  1. 云栖社区>
  2. 博客>
  3. 正文

[前端] 前端路由优缺点以及实现

nqmysb 2019-03-22 19:54:07 浏览644
展开阅读全文

前言

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

前端路由优缺点

优点

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

缺点

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

前端路由实现

页面路由

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

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

hash路由

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

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

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

h5路由

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

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

网友评论

登录后评论
0/500
评论
nqmysb
+ 关注