网站建设流程与构架,公司网站建设上海找谁,重庆网站建站,申请域名空间vue的路由实现形式
SPA
single page web application#xff0c;单页Web应用
简单的说SPA就是一个WEB项目只有一个HTML页面#xff0c;一旦页面加载完成#xff0c;SPA不会因为用户的操作而进行页面的重新加载和跳转。取而代之的是利用JS动态的改变HTML的内容#xff0c…vue的路由实现形式
SPA
single page web application单页Web应用
简单的说SPA就是一个WEB项目只有一个HTML页面一旦页面加载完成SPA不会因为用户的操作而进行页面的重新加载和跳转。取而代之的是利用JS动态的改变HTML的内容从而来模拟多个视图间的跳转。
在HTML5history对象提出了 pushState() 方法和 replaceState() 方法这两个方法可以用来向历史栈中添加数据就好像 url 变化了一样过去只有 url 变化历史栈才会变化这样就可以很好的模拟浏览历史和前进后退了现在的前端路由也是基于这个原理实现的
history.pushState
pushState(stateObj, title, url) 方法向历史栈中写入数据其第一个参数是要写入的数据对象不大于640kB)第二个参数是页面的 title, 第三个参数是 url (相对路径)。
stateObj 一个与指定网址相关的状态对象popstate事件触发时该对象会传入回调函数。如果不需要这个对象此* 处可以填null。
title新页面的标题但是所有浏览器目前都忽略这个值因此这里可以填null。
url新的网址必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
关于pushState有几个值得注意的地方
pushState方法不会触发页面刷新只是导致history对象发生变化地址栏会有反应,只有当触发前进后退等事件back()和forward()等时浏览器才会刷新
这里的 url 是受到同源策略限制的防止恶意脚本模仿其他网站 url 用来欺骗用户所以当违背同源策略时将会报错
history.replaceState
replaceState(stateObj, title, url) 和pushState的区别就在于它不是写入而是替换修改浏览历史中当前纪录其余和 pushState一模一样
这两种方法都不会刷新页面,只是导致history对象发生变化地址栏会有反应(地址栏会发送变化会变成,会变成第三个参数),只有当触发前进后退等事件back()和forward()等时浏览器才会刷新
popstate事件
定义每当同一个文档的浏览历史即history对象出现变化时就会触发popstate事件。
注意仅仅调用pushState方法或replaceState方法 并不会触发该事件只有用户点击浏览器倒退按钮和前进按钮或者使用JavaScript调用back、forward、go方法时才会触发。另外该事件只针对同一个文档如果浏览历史的切换导致加载不同的文档该事件也不会触发。
用法使用的时候可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象即这两个方法的第一个参数。
总结因为pushState和replaceState都是不会触发popstate事件的,所以可以自己定义一个事件然后去触发
const _historyWrap function (type) {// 获取原来的方法const orig history[type];// 创建新的事件const e new Event(type);return function () {// 返回新的函数const rv orig.apply(this, arguments);e.arguments arguments;// 触发事件window.dispatchEvent(e);return rv;};
};
// 对原来的pushState和replaceState函数进行了封装
history.pushState _historyWrap(pushState);
history.replaceState _historyWrap(replaceState);window.addEventListener(pushState, function (e) {console.log(change pushState);
});
window.addEventListener(replaceState, function (e) {console.log(change replaceState);
});
