单页面应用 URL 变化的基本原理

#Web 前端开发#

使用 location.hash 修改 URL hash 值

比如当前url是：http://127.0.0.1:5000

执行下面的代码后：

location.hash = 'letianbiji.com' 

URL 会变为 http://127.0.0.1:5000/#letianbiji.com 。页面不会重新加载。

如何获取当前的 hash 值？

console.log(location.hash)
// 输出 #letianbiji.com

如何监听 hash 值的变化？

// https://developer.mozilla.org/zh-CN/docs/Web/API/Window/hashchange_event
window.addEventListener('hashchange', function() {
  console.log('The hash has changed!')
}, false);

单页面如何实现？

进入该页面后渲染基础页面。如果发现有 hash 值，则展示相应内容。 如果用户点击链接，使用上面的方法修改hash值，局部更新页面。并考虑通过 document.title 修改网页标题。

使用 history.pushState 或者 history.replaceState

history.pushState 是在浏览器会话栈顶添加一个状态，history.replaceState 是替换栈顶的状态。

mdn 介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState 、https://developer.mozilla.org/zh-CN/docs/Web/API/History/replaceState 。

这两个方法会导致 url 发生变化，但不会触发重新加载网页。

比如当前url是：http://127.0.0.1:5000

执行下面的代码后：

history.pushState({}, null, '/aaa/b')

会将 url 变成 http://127.0.0.1:5000/aaa/b 。

再执行：

history.pushState({}, null, 'ccc')

url 会变成 http://127.0.0.1:5000/aaa/ccc 。

history.pushState 会触发 popstate 事件，具体见 https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event 。

单页面如何实现？

1. 使用 history.pushState 修改url
2. ajax 拉取局部资源，进行页面的局部刷新
3. 使用 document.title 修改网页标题

( 本文完 )