hash和history的区别

一、hash模式 hash是指url上#和其后面的链接，#称之为锚点。 由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了。 window.location.hash = 'qq' // 设置 url 的 hash，会在当前url后加上 '#qq' var hash = window.location.hash // '#qq' window.addEventListener('hashchange', function(){ // 监听hash变化，点击浏览器的前进后退会触发 }) 二、history模式 首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。 history api可以分为两大部分：切换和修改 1、切换历史状态包括back、forward、go 这三个方法，对应浏览器的前进，后退，跳转操作；（跳转操作：在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转） history.go(-2);//后退两次 history.go(2);//前进两次 history.back(); //后退 hsitory.forward(); //前进 2、修改历史状态包括了 pushState, replaceState两个方法 这两个方法接收三个参数:stateObj, title, url window.history.pushState(state, title, url) // state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取 // title：标题，基本没用，一般传 null // url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。 //如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/， //执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/ window.history.replaceState(state, title, url) // 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录 window.addEventListener("popstate", function() { // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发 }); history模式下，不怕前进后退，就怕h5刷新页面，因为刷新页面是向服务器请求了。 history 模式改变 url 的方式会导致浏览器向服务器发送请求，这不是我们想看到的，我们需要在服务器端做处理：如果匹配不到任何静态资源，则应该始终返回同一个 html 页面。 nginx服务器配置： // 意思为,匹配url和url/下的文件，如果吗，没有匹配到，则返回index.html location / { try_files $uri $uri/ /index.html; }

本文章由javascript技术分享原创和收集