开发阶段Express.js应用点击菜单触发浏览器刷新的问题排查

兄弟，我懂你为啥困惑——明明用的是Node.js/Express，结果点菜单就整页刷新，完全不像印象中那种无跳转的Node应用。其实问题很简单：你的应用现在是传统的服务端渲染模式，和PHP的工作逻辑一模一样，而你想要的是单页应用（SPA）的无刷新体验，这得靠前端代码来实现，Express本身不会自动帮你做这个。

核心原因拆解 #

你现在的菜单链接应该是普通的<a href="/about">About</a>这种，点击后浏览器会直接向Express发送请求，Express渲染整个HTML页面返回给浏览器，浏览器自然就刷新了。而那种无刷新导航的Node应用，都是靠前端JS拦截点击事件，用AJAX加载内容，再手动更新URL和页面内容，根本不让浏览器触发默认的跳转行为。

一步步解决问题 #

1. 先拦截菜单的点击事件 #

首先得阻止浏览器的默认跳转，给所有菜单链接绑个点击事件：

// 假设你的菜单链接都有个统一的class，比如nav-link
document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 关键：阻止浏览器自动刷新跳转
    const targetUrl = link.getAttribute('href');
    // 接下来处理路由切换和内容更新
    switchPage(targetUrl);
  });
});

2. 写前端路由的核心逻辑 #

接下来写switchPage函数，要做三件事：更新URL、加载内容、替换页面区域。用原生JS就能搞定：

async function switchPage(url) {
  // 更新浏览器地址栏的URL，同时保留历史记录
  history.pushState(null, null, url);
  
  // 用fetch从后端拿对应页面的内容
  try {
    // 这里可以加个自定义请求头，告诉后端这是AJAX请求
    const response = await fetch(url, {
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    });
    const pageContent = await response.text();
    // 把内容替换到页面的内容容器里，比如id为content的div
    document.getElementById('content').innerHTML = pageContent;
  } catch (err) {
    console.error('加载页面失败:', err);
    document.getElementById('content').innerHTML = '<p>页面加载出错了</p>';
  }
}

3. 让后端配合返回部分内容 #

现在后端不能再返回完整的HTML页面了，得区分是浏览器直接访问（要返回完整页面）还是前端AJAX请求（只返回内容部分）。比如用Express的模板引擎（比如EJS）的话：

app.get('/about', (req, res) => {
  // 判断是不是AJAX请求
  const isAjax = req.headers['x-requested-with'] === 'XMLHttpRequest';
  if (isAjax) {
    // 只渲染内容部分的模板
    res.render('about-content');
  } else {
    // 渲染包含导航栏的完整页面模板
    res.render('about-full');
  }
});

4. 别忘了处理浏览器的前进后退 #

用户点浏览器的前进/后退按钮时，也要触发页面切换，所以得监听popstate事件：

window.addEventListener('popstate', () => {
  switchPage(window.location.pathname);
});

偷懒的办法：用前端框架的路由 #

如果不想自己写这些原生JS逻辑，直接用React Router、Vue Router或者SvelteKit这类框架的路由功能，它们已经把无刷新导航的细节都封装好了，你只需要配置路由规则就行，省心很多。

最后提一句SEO #

如果你的应用需要考虑搜索引擎收录，纯SPA的无刷新导航可能会有问题，因为搜索引擎初始爬取时可能拿不到动态加载的内容。不过你现在是开发阶段，这个可以等部署前再考虑，比如加上服务端渲染（SSR）或者静态站点生成（SSG）。

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