Node.js单页应用中route-link与fas fa-link链接行为差异问题

这个差异的核心原因很清晰——你的单页应用（SPA）里存在专门的路由拦截逻辑，只对带有route-link类的链接生效，下面给你拆解细节：

1. 不带route-link的链接：触发浏览器原生跳转 #

你第一个写的链接：

<a href="/apiservicedemo">
  <i class="fas fa-link"></i> here
</a>

这是浏览器原生的<a>标签行为：当用户点击时，浏览器会默认发起一个新的HTTP请求，请求/apiservicedemo对应的资源，然后全量加载新页面，所以会看到页面刷新。这是没有任何JS拦截时的默认表现。

2. 带route-link的链接：被SPA路由逻辑拦截 #

你第二个链接加上了class="route-link"，和首页、个人资料的链接写法一致：

<a href="/apiservicedemo" class="route-link">here 2</a>

你的应用里肯定有一段类似这样的JavaScript代码（可能是自己手写的，也可能是用了轻量路由工具），专门监听带有这个类的链接点击：

// 示例：常见的SPA路由拦截逻辑
document.addEventListener('DOMContentLoaded', () => {
  // 给所有.route-link绑定点击事件
  document.querySelectorAll('.route-link').forEach(link => {
    link.addEventListener('click', (event) => {
      // 第一步：阻止浏览器默认的跳转行为
      event.preventDefault();
      
      // 第二步：获取目标路由路径
      const targetPath = link.getAttribute('href');
      
      // 第三步：切换页面内容（隐藏其他div，显示目标div）
      document.querySelectorAll('.page').forEach(page => {
        page.style.display = 'none';
      });
      const targetPage = document.getElementById(`content-${targetPath.slice(1)}`);
      if (targetPage) {
        targetPage.style.display = 'block';
      }
      
      // 第四步：更新浏览器地址栏（不刷新页面）
      history.pushState({}, '', targetPath);
    });
  });
});

这段代码做了几个关键操作：

• 用event.preventDefault()阻止了浏览器的原生跳转
• 通过DOM操作切换页面div的显示/隐藏，实现无刷新内容切换
• 用history.pushState()更新浏览器地址栏，让URL和当前显示的内容匹配，同时支持浏览器的前进后退功能

这就是首页、个人资料链接能无刷新跳转的原因——它们都被这段路由逻辑处理了，而你第一个新增的链接没加route-link类，就没被拦截，触发了浏览器的默认页面刷新。

总结 #

要让第一个链接也实现无刷新跳转，只需要给它加上route-link类就行，和第二个链接保持一致。这是单页应用路由的标准实现方式：通过拦截原生链接行为，用DOM操作替换全页刷新，提升用户体验。

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