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

前言

前端路由优缺点

优点

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