页面导航后JavaScript不执行，寻求类似onNavigate的替代事件

嘿，我懂你遇到的问题了——DOMContentLoaded 这个事件只会在页面首次加载或者刷新的时候跑一次，要是你用的是单页应用（就是那种点击导航不用重新加载整个页面的），路由切换的时候文档根本没重新加载，所以这个事件自然不会再触发啦。你要找的其实是路由导航完成后的触发机制，不同场景下有不同的解决办法：

1. 用前端框架的话（React/Vue/Angular这些） #

每个框架的路由工具都自带了导航相关的钩子，直接用就行：

• React Router：可以用 useEffect 监听 useLocation() 的变化，或者用专门的导航监听钩子
• Vue Router：全局层面可以用 router.afterEach()，组件里也能直接用 onRouteUpdate 生命周期
• Angular：订阅 Router 的 events，监听 NavigationEnd 事件就行

举个Vue Router的简单例子：

// 在你的路由配置文件里
router.afterEach((to, from) => {
  console.log('页面切完啦！');
  // 把你要执行的逻辑放在这儿
});

2. 原生JS或者自己写路由的情况 #

要是你没用到框架，或者用了轻量路由库，可以这么搞：

• 监听 popstate 事件：浏览器前进后退的时候会触发这个事件，但要注意哦，手动调用 history.pushState 或者 replaceState 是不会自动触发它的，得自己手动加个自定义事件：

  // 先监听浏览器的前进后退
  window.addEventListener('popstate', function() {
    console.log('导航变了！');
    // 执行你的逻辑
  });
  
  // 重写pushState，触发自定义的navigate事件
  const originalPushState = history.pushState;
  history.pushState = function(...args) {
    originalPushState.apply(this, args);
    window.dispatchEvent(new Event('navigate'));
  };
  
  // 监听我们自定义的navigate事件
  window.addEventListener('navigate', function() {
    console.log('页面导航完成！');
  });
  

• 拦截跳转链接：如果是点击页面里的链接触发路由跳转，给所有路由链接加个点击事件，跳转完就执行你的逻辑

3. 给你的Pug代码改一改 #

把原来写在 DOMContentLoaded 里的逻辑抽成单独的函数，然后在初始加载和导航完成的时候都调用它：

doctype html
html
  head
    script(type="text/javascript").
      // 把初始化逻辑抽成函数
      function initPage() {
        console.log('ready!');
        // 这里放你要执行的页面初始化代码
      }

      // 页面首次加载时执行
      document.addEventListener('DOMContentLoaded', initPage);

      // 导航完成时也执行（根据你的路由场景选上面的事件）
      window.addEventListener('navigate', initPage);
      // 或者用popstate事件
      // window.addEventListener('popstate', initPage);

这样不管是刷新页面还是切换路由，你的初始化逻辑都会正常跑啦～

内容的提问来源于stack exchange，提问作者xiaolingxiao