单页面前端路由

最新推荐文章于 2022-10-24 18:19:11 发布

weixin_34245082

最新推荐文章于 2022-10-24 18:19:11 发布

阅读量78

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://juejin.im/post/5b3cbff8e51d45199940bc0c

版权

最近在对前端路由这块有点困惑，所以去看了一些关于这方面的博客，整理了一下思路

单页面前端路由有两种模式：hash 和 history

hash模式就是通过location.hash改变 url 不刷新页面

hashchange 事件能监听 url hash 的改变。

代码实例：

window.addEventListener('hashchange', function(e) {
  console.log(e)
})
复制代码

window.history属性指向 History 对象，它表示当前窗口的浏览历史。

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

window.history.length // 3
复制代码

由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。

// 后退到前一个网址
history.back()

// 等同于
history.go(-1)
复制代码

浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。

back()

在历史记录中后退 history.back()
forward()

在历史记录中前进 history.forward()
go()

移动到指定的历史记录点 history.go(-1)

通过指定一个相对于当前页面位置的数值，你可以使用go()方法从当前会话的历史记录中加载页面（当前页面位置索引值为0，上一页就是-1，下一页为1）

go()不填参数或参数为go(0)时，页面会刷新，即history.go()或history.go(0)相当于location.reload()
pushState()

pushState(any data, string title, [string url])

第一个参数为history对象的state属性值，可以放任意数据，记录历史状态。第二个参数是新状态的标题，目前浏览器基本不支持。第三个参数为可选的相对url。

执行pushState后，可以在不加载新页面的情况下，更改url。同时history栈中新增一条数据。
replaceState()

replaceState(any data, string title, [string url])

与pushState()类似，只是在history栈中不是新增记录，而是替换一条记录。

pushState()和replaceState()方法存在安全方面的限制，本地静态测试是无效的，会报错，需要放到服务器上来查看效果（可以本地用http-server开一个简单的服务器等方法测试）。
使用location.href等方法，会改变当前history的堆栈值，并且会删除当前后面的值，使用location.href后返回也会刷新页面

popstate 事件能监听除 history.pushState() 和 history.replaceState() 外 url 的变化。

代码实例：

window.addEventListener('popstate', function(e) {
  console.log(e)
})
复制代码

其实不止 history.pushState() 和 history.replaceState() 对 url 的改变不会触发 popstate 事件，当这两个方法只改变 url hash 时也不会触发 hashchange 事件。

https://segmentfault.com/a/1190000014120456

https://gaohaoyang.github.io/2015/12/31/History-API

https://javascript.ruanyifeng.com/bom/history.html#toc7

转载于:https://juejin.im/post/5b3cbff8e51d45199940bc0c

关注