url的hash和HTML5的history模式

文章目录

一、hash模式

URL的hash也就是锚点(#)，比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

由于hash值变化不会导致浏览器向服务器发出请求，而且hash改变会触发 hashchange 事件，浏览器的进后退也能对其进行控制，这么一来，即使前端并没有发起http请求也能够找到对应页面的代码块进行按需加载。所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。

在这里插入图片描述

二、HTML5的history模式

history 接口是HTML5新增的，window.history 属性指向 history 对象，它表示当前窗口的浏览历史。浏览器工具栏的“前进”和“后退”按钮，其实就是对 history 对象进行操作。

history 对象保存了当前窗口访问过的所有页面网址。下面代码表示当前窗口一共访问过3个网址。

history 对象主要有两个属性。

history.length：当前窗口访问过的网址数量（包括当前网页）
history.state：history 堆栈最上层的状态值

// 当前窗口访问过多少个网页
window.history.length // 1

// history 对象的当前状态
// 通常是 undefined，即未设置
window.history.state // undefined

由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。history有五个方法改变URL而不刷新页面

1、history.pushState(state,title,url)

向浏览器新增一条历史记录，但是不会刷新当前页面（不会重载），我们点击浏览器的后退按钮是可以归到之前的页面的

state：一个与添加的记录相关联的状态对象，主要用于popstate事件。
title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

2、history.replaceState(state,title,url)

更改当前浏览器的历史记录，即把当前执行此代码页面的记录给替换掉，那么我们点击浏览器的后退按钮就不能回到之前的页面了

3、history.back()、history.forward()、history.go()

这三个方法用于在历史之中移动。

history.back() ：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。
history.forward() ：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。
history.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，比如go(1)相当于forward()，go(-1)相当于back()。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为0，相当于刷新当前页面。