本文共 838 字，大约阅读时间需要 2 分钟。

URL改变而页面不发生刷新的两种方式

一、URL的哈希方法（#）

哈希（Hash），也称为锚点，是URL的一部分，用于标记文档中的某个位置。当哈希值发生变化时，浏览器不会重新加载页面，而是通过请求同一资源重新渲染。这种方法无需页面刷新，可以轻松实现URL改变而无状态Build的效果。

要实现哈希方法，可以通过直接赋值location.hash来完成。例如：

location.hash = '#newpage';

传统的方式是通过点击锚点元素或手动设置，页面随即显示对应的内容。这种做法在实际应用中较为常见，如单页应用或模块式加载时非常有用。

二、HTML5的历史记录（history）

HTML5引入了history对象，提供了更多控制浏览器记录的方法。其中，pushState和replaceState是两种主要方法，用于修改URL而无需页面刷新。

pushState采用栈结构，最新一次改动会覆盖之前记录。这使其非常适合用于单页应用的前进和后退行为。例如：

history.pushState({
  state: 'newState',
  title: '新状态'
});

调用history.back()或history.go(-1)可以返回到最近的一个状态。这与浏览器自带的前进后退按钮效果相同。

2. replaceState方法

与pushState不同，replaceState会将当前状态完全替换。这种方式不符合严格的前进后退行为，但可以用于特定自定义场景。

可以通过观察window.history中各状态来掌握它们的使用情况。

三、历史记录方法的实际应用

在实际开发中，选择合适的历史记录方法至关重要：

• pushState：适合创建用户导航路径，支持前进后退。
• replaceState：用于替换当前状态，适合模块化加载或特定操作后重置页面状态。

通过正确理解和合理运用这两种方法，可以实现灵活的URL控制，同时确保用户体验良好。