router(History,hash)前端路由机制
最新回答
-凉薄少年葬空城
2024-07-03 00:20:02
前端路由，顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。
前端路由机制原理及两种实现方式
一、History
History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。
用户访问网页的历史记录通常会被保存在一个类似于栈对象中，即history对象：
history 对象包含用户（在浏览器窗口）访问过的url
history对象是window对象的一部分，可以通过window.history属性进行访问。
基本的API用法如back、forward、go不做多解释，可以参考MDN
重点解释html5新增的API：
1、history.pushState（） //在history对象中添加一条新的浏览记录
2、History.replaceState() // 是替换history中的当前记录
3、history.state //是一个属性，可以得到当前页的state信息。
4、window.onpopstate //是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。
(和它相似的一个方法叫做onhashchange，onhashchange是老API, 浏览器支持度高, 本来是用来监
听hash变化的, 但可以被利用来做客户端前进和后退事件的监听，onpopstate是专门用来监听浏览器
前进后退的, 不仅可以支持hash, 非hash的同源url也支持。)
history.pushState与History.replaceState的区别
history.pushState和History.replaceState都接收三个参数：即（data[,title][,url]）
状态对象（state Object）：一个object，与pushState方法创建的新历史记录条目关联。
标题：一般传null
地址（url）：新的历史记录条目的地址。
pushState和replaceState都会操作浏览器的历史记录，并且不会引起页面的刷新。
不同之处在与：一个新增，一个替换。
History 模式是 HTML5 新推出的功能，比之 Hash URL 更加美观
一、hash
我们经常看到在url中出现#符号，这个在路由中出现的#，叫做hash，很多大型框架的路由系统都是由hash实现的。
上面提到一个方法onhashchange事件，用来监听hash变化，也可以被利用来做客户端前进和后退事件的监听。
热门标签
