核心问题：

• popstate 事件：仅在浏览器的前进、后退按钮被点击，或者调用 history.back()、history.forward() 时触发。
• history.pushState() 和 history.replaceState()：不会触发 popstate 事件。
• 疑问：Vue Router 如何监听通过页面内按钮或链接点击导致的 URL 改变？

详细解答：

一、Vue Router 如何处理导航

1. 内部管理导航事件

Vue Router 在内部管理导航事件，当您使用 Vue Router 提供的导航方法或组件时，它会自行处理导航过程，包括更新 URL、解析路由、执行导航守卫等。

• 编程式导航：router.push()、router.replace() 方法。
• 声明式导航：<router-link> 组件。

2. router.push() 的实现

当您调用 router.push() 时，Vue Router 执行以下步骤：

1. 解析目标路由：根据传入的参数，解析出目标路由对象。
2. 执行导航守卫：依次执行全局、路由独享、组件内的导航守卫。
3. 更新路由状态：更新内部的 currentRoute 对象，使其响应式地反映当前路由。
4. 更新浏览器历史记录：调用 history.pushState() 更新 URL，但不触发页面刷新。
5. 触发视图更新：<router-view> 组件检测到 currentRoute 变化后，渲染对应的组件。

示例代码：

router.push('/home');

内部实现简化如下：

function push(to) {
  // 解析目标路由
  const targetLocation = resolve(to);
  // 执行导航流程
  navigate(targetLocation);
}
function navigate(targetLocation) {
  // 执行导航守卫等逻辑
  // ...
  // 更新路由状态
  currentRoute.value = targetLocation;
  // 更新浏览器历史记录
  history.pushState({}, '', targetLocation.fullPath);
}

3. <router-link> 的工作机制

<router-link> 组件在被点击时，会阻止默认的 <a> 标签行为，然后调用 router.push() 方法。

示例：

<router-link to="/home">Go to Home</router-link>

组件内部逻辑：

{
  methods: {
    navigate(event) {
      event.preventDefault();
      this.$router.push(this.to);
    }
  }
}

二、Vue Router 如何监听 URL 变化

1. 内部维护路由状态

Vue Router 通过维护一个响应式的 currentRoute 对象，来跟踪当前的路由状态。任何通过 Vue Router 方法导致的导航，都会更新 currentRoute，从而触发相关组件的响应式更新。

2. 监听浏览器前进/后退操作

对于浏览器的前进、后退按钮，Vue Router 使用 popstate 事件监听器来捕获这些导航事件。

window.addEventListener('popstate', ({ state }) => {
  // 获取当前 URL 对应的路由
  const to = createCurrentLocation(base);
  // 执行导航流程
  navigate(to, state);
});

3. history.pushState() 不会触发 popstate

正如您所指出的，调用 history.pushState() 或 history.replaceState() 不会触发 popstate 事件。因此，Vue Router 不能依赖 popstate 来监听这些操作。

三、Vue Router 如何处理通过 history.pushState() 导致的 URL 改变

1. 使用 Vue Router 的导航方法

最佳实践：应始终使用 Vue Router 提供的导航方法（如 router.push()）或组件（如 <router-link>）来进行导航。

• 原因：这些方法会触发 Vue Router 内部的导航流程，包括路由解析、导航守卫执行、视图更新等。
• 结果：应用的状态与 URL 保持一致，导航过程中的各种逻辑（如权限校验）能够正常执行。

2. 直接调用 history.pushState() 的问题

如果在 Vue Router 管理的应用中，直接调用 history.pushState()，Vue Router 将无法感知到这种 URL 的变化，因为：

• history.pushState() 不会触发 popstate 事件。
• Vue Router 没有监听 pushState 的调用。

解决方案：

• 避免直接调用：尽量避免直接使用 history.pushState()，而是使用 router.push()。
• 监听 popstate：如果必须直接操作浏览器历史记录，需要确保在 popstate 事件中处理相应的逻辑。

3. 重写 pushState 方法（不推荐）

一种可行但不推荐的方式是重写 history.pushState 和 history.replaceState，以捕获所有的历史记录变更。

示例代码：

(function() {
  const originalPushState = history.pushState;
  history.pushState = function(state, title, url) {
    originalPushState.apply(this, arguments);
    // 手动触发自定义事件
    window.dispatchEvent(new Event('locationchange'));
  };
  const originalReplaceState = history.replaceState;
  history.replaceState = function(state, title, url) {
    originalReplaceState.apply(this, arguments);
    window.dispatchEvent(new Event('locationchange'));
  };
})();
// 监听自定义的 locationchange 事件
window.addEventListener('locationchange', () => {
  // 获取当前 URL 对应的路由
  const to = createCurrentLocation(base);
  // 执行导航流程
  navigate(to);
});

注意：

• 风险：重写原生方法可能导致意外的问题，影响其他依赖于历史记录的代码。
• 不推荐：官方也不建议这样做，最好是使用框架提供的导航方法。

四、最佳实践与建议

1. 始终使用 Vue Router 的导航方法

• 使用 router.push()、router.replace() 进行编程式导航。
• 使用 <router-link> 组件进行声明式导航。

2. 避免直接操作 history API

• 直接调用 history.pushState()、history.replaceState()，Vue Router 无法感知，可能导致应用状态与 URL 不一致。

3. 如果必须直接操作，确保同步路由状态

• 如果在特殊情况下需要直接调用 history.pushState()，需要手动更新 Vue Router 的状态。
• 例如，调用 router.push()，并传入新的路径。

示例：

// 直接更新 URL
history.pushState({}, '', '/new-path');
// 手动通知 Vue Router
router.push('/new-path');

五、Vue Router 内部是如何处理的

1. Vue Router 内部的导航机制

Vue Router 在内部封装了导航的全过程，当您调用 router.push() 时，以下步骤被执行：

1. 解析目标位置：将传入的路径解析为路由对象。
2. 构建导航守卫队列：收集需要执行的导航守卫。
3. 执行导航守卫：按顺序执行全局守卫、路由守卫、组件守卫。
4. 更新路由状态：更新 currentRoute 响应式对象。
5. 更新浏览器 URL：调用 history.pushState() 或 history.replaceState()。
6. 触发组件更新：由于 currentRoute 是响应式的，相关组件会自动更新。

2. 监听浏览器导航事件

对于浏览器前进、后退操作，Vue Router 需要监听 popstate 事件，以便同步内部路由状态。

代码简化：

window.addEventListener('popstate', ({ state }) => {
  // 获取新的路由位置
  const to = createCurrentLocation(base);
  // 执行导航流程
  navigate(to);
});

六、总结

• Vue Router 内部管理导航事件：通过 router.push()、<router-link> 等方式，Vue Router 能够完整地控制导航过程。
• popstate 事件用于监听浏览器导航：仅在用户点击浏览器的前进、后退按钮时触发，Vue Router 需要监听该事件来处理这些导航。
• 避免直接调用 history.pushState()：这样会导致 Vue Router 无法感知导航变化，从而无法正确地更新路由状态和组件。
• 最佳实践：始终使用 Vue Router 提供的导航方法和组件，确保应用的状态、URL 和视图保持一致。

扩展阅读：

如何监听所有的 URL 变化

如果您需要监听所有的 URL 变化，包括 history.pushState()、history.replaceState()、popstate，可以考虑以下方案：

1. 使用 hashchange 事件（仅限哈希模式）

• 在哈希模式下，可以监听 hashchange 事件，捕获 URL 中哈希值的变化。

window.addEventListener('hashchange', () => {
  // 获取新的哈希值
  const hash = location.hash;
  // 执行导航逻辑
});

2. 使用 popstate 和自定义事件

• 如前所述，重写 pushState、replaceState，并触发自定义事件。但不推荐这种方式。

3. 使用 onpushstate 自定义事件（实验性）

• 有些浏览器支持 onpushstate 事件，可以监听 pushState 调用。但兼容性不佳。

结论

对于 Vue Router 管理的单页应用，最安全、可靠的方法是通过 Vue Router 提供的 API 进行导航。这样可以确保导航过程中的所有逻辑（如导航守卫、组件更新）都能正确执行。

如果在特殊情况下需要直接操作浏览器历史记录，需要谨慎处理，并确保同步更新 Vue Router 的路由状态。