[转帖]路由的两种模式:hash模式和 history模式
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
为什么要使用路由现在的网络应用程序越来越多的使用AJAX异步请求完成页面的无缝刷新,导致浏览器的URL不会发生任何变化而完成了请求,从而破换了用户浏览体验。同时本次浏览的页面内容在用户下次使用URL访问时将无法重新呈现,使用路由可以很好地解决这个问题。 单页面应用利用了Javascript动态变换网页内容,避免了页面重载;路由则提供了浏览器地址变化,网页内容也跟随变化,两者结合起来则为我们提供了体验良好的单页面web应用。 前端路由实现方式路由需要实现三个功能:
在单页面web网页中, 单纯的浏览器地址改变, 网页不会重载,如单纯的hash网址改变网页不会变化,因此我们的路由主要是通过监听事件,并利用js实现动态改变网页内容,有两种实现方式:
hash模式使用window.location.hash属性及窗口的onhashchange事件,可以实现监听浏览器地址hash值变化,执行相应的js切换网页。下面具体介绍几个使用过程中必须理解的要点:
触发hashchange事件的几种情况浏览器地址栏散列值的变化(包括浏览器的前进、后退)会触发 当浏览器地址栏中URL包含哈希如 www.baidu.com/#home,这时按下输入,浏览器发送www.baidu.com/,请求至服务器,请求完毕之后设置散列值为 当只改变浏览器地址栏URL的哈希部分,这时按下回车,浏览器不会发送任何请求至服务器,这时发生的只是设置散列值新修改的哈希值,并触发onhashchange事件; html中 //设置 url 的 hash,会在当前url后加上'#abc' window.location.hash='abc'; let hash = window.location.hash //'#abc' window.addEventListener('hashchange',function(){ //监听hash变化,点击浏览器的前进后退会触发 }) history模式概述
属性History 对象主要有两个属性。
// 当前窗口访问过多少个网页 history.length // 1 // History 对象的当前状态 // 通常是 undefined,即未设置 history.state // undefined 方法
history.back(); history.forward(); history.go(1);//相当于history.forward() history.go(-1);//相当于history.back() history.go(0); // 刷新当前页面 注意:移动到以前访问过的页面时,页面通常是从浏览器缓存之中加载,而不是重新要求服务器发送新的网页。 History.pushState()该方法用于在历史中添加一条记录。 语法: 该方法接受三个参数,依次为:
var data = { foo: 'bar' }; history.pushState(data, '', '2.html'); console.log(history.state) // {foo: "bar"} 注意:如果 pushState 的 URL 参数设置了一个新的锚点值(即 hash),并不会触发 hashchange 事件。反过来,如果 URL 的锚点值变了,则会在 History 对象创建一条浏览记录。 如果 pushState() 方法设置了一个跨域网址,则会报错。 // 报错 // 当前网址为 http://example.com history.pushState(null, '', 'https://twitter.com/hello'); 上面代码中,pushState 想要插入一个跨域的网址,导致报错。这样设计的目的是,防止恶意代码让用户以为他们是在另一个网站上,因为这个方法不会导致页面跳转。 History.replaceState()该方法用来修改 History 对象的当前记录,用法与 pushState() 方法一样。 假定当前网页是 example.com/example.htm… history.pushState({page: 1}, '', '?page=1') // URL 显示为 http://example.com/example.html?page=1 history.pushState({page: 2}, '', '?page=2'); // URL 显示为 http://example.com/example.html?page=2 history.replaceState({page: 3}, '', '?page=3'); // URL 显示为 http://example.com/example.html?page=3 history.back() // URL 显示为 http://example.com/example.html?page=1 history.back() // URL 显示为 http://example.com/example.html history.go(2) // URL 显示为 http://example.com/example.html?page=3 popstate 事件每当 history 对象出现变化时,就会触发 popstate 事件。 注意:
使用的时候,可以为popstate事件指定回调函数,回调函数的参数是一个 event 事件对象,它的 state 属性指向当前的 state 对象。 window.addEventListener('popstate', function(e) { //e.state 相当于 history.state console.log('state: ' + JSON.stringify(e.state)); console.log(history.state); }); 通过history.pushState 实现页面 tab 切换的功能。 history 致命的缺点就是当改变页面地址后,强制刷新浏览器时,(如果后端没有做准备的话)会报错,因为刷新是拿当前地址去请求服务器的,如果服务器中没有相应的响应,会出现 404 页面。 —————————————————— https://juejin.cn/post/7236563012533878821 该文章在 2023/5/30 9:08:08 编辑过 |
关键字查询
相关文章
正在查询... |