在原生 JavaScript 中监听路由变化的方式主要分为两种场景：监听哈希（Hash）路由变化和监听 History API 的路由变化。Vue 框架本身并不直接处理路由监听，但 Vue 的官方路由库 vue-router 内部会封装这些原生机制。

一、原生 JavaScript 监听路由变化

1. 监听哈希（Hash）路由变化

当 URL 的哈希部分（# 后的内容）发生变化时，可以通过 hashchange 事件监听：

window.addEventListener('hashchange', () => {
  const hash = window.location.hash; // 获取当前 hash
  console.log('Hash changed to:', hash);
});

// 示例：修改 hash 触发事件
window.location.hash = 'new-hash';

2. 监听 History API 的路由变化

当使用 history.pushState() 或 history.replaceState() 修改路由时，需要通过以下方式监听：

• 拦截原生方法：覆盖 pushState 和 replaceState，手动触发事件。
• 监听 popstate 事件：浏览器前进/后退操作会触发该事件，但直接调用 pushState 不会。

// 覆盖 history.pushState 和 history.replaceState
const originalPushState = history.pushState;
history.pushState = function(state, title, url) {
  originalPushState.apply(history, arguments);
  // 手动触发自定义事件
  window.dispatchEvent(new Event('pushstate'));
};

// 监听自定义事件和 popstate
window.addEventListener('pushstate', handleRouteChange);
window.addEventListener('popstate', handleRouteChange);

function handleRouteChange() {
  const path = window.location.pathname; // 获取当前路径
  console.log('Route changed to:', path);
}

// 示例：使用 pushState 修改路由
history.pushState({}, '', '/new-path');

二、Vue 框架中的路由监听

在 Vue 项目中，通常使用 vue-router 库管理路由，它会自动封装原生路由监听逻辑，开发者无需手动处理。vue-router 提供了两种模式：

1. Hash 模式：基于 URL 哈希（如 http://example.com/#/home）。
2. History 模式：基于 History API（需要服务器支持）。

1. Vue 中监听路由变化的方式

• 通过 watch 监听 $route：

export default {
  watch: {
    '$route'(to, from) {
      console.log('路由变化：', to.path);
    }
  }
};

• 使用导航守卫

router.beforeEach((to, from, next) => {
  console.log('即将进入路由：', to.path);
  next();
});

2. Vue 是否需要原生路由监听？

• 不需要：vue-router 内部已经通过 hashchange 和 popstate 等原生事件监听路由变化，开发者只需使用其提供的 API（如 $route、导航守卫）。
• 特殊场景：如果需要在 Vue 之外监听路由（如微前端架构），可以结合原生方法，但要避免与 vue-router 冲突。

总结

建议在 Vue 中直接使用 vue-router 的 API，避免重复造轮子。