开发者社区> 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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端项目实战35-路由懒加载优化
前端项目实战35-路由懒加载优化
16 0
前端校验和后端校验的区别和优缺点
前端校验和后端校验的区别和优缺点
31 0
前端工作总结151-动态路由和表结构无关
前端工作总结151-动态路由和表结构无关
8 0
vue再读76-路由 js实现原理
vue再读76-路由 js实现原理
11 0
前端-vue基础92-路由的基本概念和说明
前端-vue基础92-路由的基本概念和说明
12 0
【轻松入门vue】vue前端路由
Vue前端路由七、Vue前端路由1. 路由的基本概念与原理后端路由前端路由实现简单的前端路由vue-router基本概念2. vue-router的基本使用基本使用步骤路由重定向3. vue-router嵌套路由嵌套路由功能分析实例demo4. vue-router动态路由匹配通过动态路由参数的模式进行路由匹配路由组件传递参数5. vue-router命名路由6. vue-router编程式导航 七、Vue前端路由 1. 路由的基本概念与原理 路由是一个比较广义和抽象的概念,路由的本质就是对应关系。 后端路
23 0
浅谈前端路由🏃
浅谈前端路由🏃
57 0
自己动手实现一个前端路由
最近工作比较忙,写的比较慢,当我写完这一篇准备发布的时候,发现掘金刚好也有一篇关于前端路由的,而且写的比我详细,不过辛辛苦苦写的总不能删掉吧,再说我的路由风格是纯个人思路实现的,所以还是硬着头皮发了哈。
1823 0
+关注
nqmysb
专注前后端全栈技术,大数据等方向研究,个人博客网站 liaocan.top
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Web服务架构变化及性能优化
立即下载
2021前端热门技术解读
立即下载
《前端智能化实践》——逻辑代码生成
立即下载