开发者社区> nqmysb> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 前言 ssm时代,多页面时代,需要页面渲染模板,如 freemark,jsp 等模板引擎。前后端没有分离时,路由是由后端处理的,浏览器接收到 .do .action的请求,传到后台对应 spring mvc 会进行逻辑处理返回对应的页面,实现路由的分发 return **.
+关注继续查看

前言

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 0
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )
docxtemplater、pizzip、jszip-utils、file-saver 前端实现导出word
0 0
vue 前端实现随机背景色
vue 前端实现随机背景色
0 0
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
0 0
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
0 0
【前端算法】用JS实现快速排序
理解数组方法里面运用到的算法,splice 和 slice的区别
0 0
【前端算法】javaScript实现二分查找
如何使用JS实现一个合格的二分查找
0 0
【前端算法】两个栈实现一个队列
介绍栈和队列的区别,以及如何使用栈实现一个队列
0 0
+关注
nqmysb
专注前后端全栈技术,大数据等方向研究,个人博客网站 liaocan.top
文章
问答
文章排行榜
最热
最新
相关电子书
更多
万物互联语音交互从端开始——前端处理从技术到商业
立即下载
2022 前端技术趋势解读
立即下载
智能前端技术与实践
立即下载