单页面路由
深度剖析SPA前端路由原理与实现方式
1.什么是SPA
single page web application
web项目只有一个HTML页面,传统页面有好几个HTML文件。切换路由的时候,不会跳转路由
通过切换视图
2.什么是前端路由
根据不同的url地址展示不同的内容或页面
后端:mvc,根据客户提交的路径,将请求解析到相应的控制器
所谓的路由:就是负责相应的客户的http请求,客户发送一个请求,我们通过一个对应的处理函数来处理客户的请求
路由=》函数
url发起请求,通过映射的函数来处理这个请求
// 多页面
ajax出现的,才慢慢有了spa
大大的提高了web应用的交互体验
1.spa无法记住用户的操作记录,无论是刷新,还是前进后退,都没有办法展示用户真实的期望内容
2.spa由于业务的不同它会有多重的页面展示形式,但是只有一个url,对seo不友好,不方便搜索引擎进行收录
前端路由
就是为了解决上述两个问题
1.改变我们的url,并且不让我们的浏览器向我们的服务器发起请求
2.我们必须要监听到url的变化
前端路由中
实现我们路由有两种机制:
1.基于HASH
2.history
什么是hash
url:http://study.163.com/#lincancan
#lincancan 就是我们的hash值
hash值的变化,不会导致浏览器向服务器发起请求
hash的改变会触发
hashchange事件
h5的history出现之前,基本都是使用hash的模式实现路由
history的实现
BOM
通过history对象
history.go(-1) //后退一夜
简单的实现页面跳转
h5中,两个新的api
改变url,不会刷新页面
history.pushState();
hisory.replaceState();
具备实现前端路由的能力
hash模式,当hash变化时候,可以通过hashchange进行监听
而history的改变,并不会触发任何事件,所以我们暂时无法监听history
换思路
可以罗列出所有可能触发history改变的情况,我们把这些情况进行一个拦截,变相的去监听history的改变
在单页的history中,url的变化:有几种方式引起
1.点击浏览器的前进或后退,会不会引起url的变化
2.点击a标签是不是会引起我们的url的变化
3.js中,触发history.pushState()函数
4.js中,触发history.replaceState()函数
posted on 2019-08-22 15:08 Diamond_xx 阅读(207) 评论(0) 编辑 收藏 举报