单页网站如何去除URL中的#section并仅显示根域名？

嘿，我来帮你把这个问题拆解清楚！你提到的这种点击菜单后URL始终保持根域名、没有#section这类锚点标识的单页网站，确实需要前端路由逻辑配合服务器配置来实现，.htaccess是其中重要的一环，下面给你详细讲几种可行的技术方案：

1. 前端用History API拦截并修改URL #

传统单页网站的锚点跳转（#about-us）属于hash模式，而要让URL始终显示根域名，我们可以利用浏览器的History API来拦截菜单点击事件，阻止默认跳转行为，同时动态修改URL为根域名，再切换页面内容。

举个简单的JavaScript实现示例：

// 给所有导航菜单链接绑定点击事件
document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止浏览器默认的页面跳转行为
    const targetSection = link.dataset.section; // 假设菜单链接用data-section标记目标区块ID
    
    // 执行页面内容切换逻辑（比如显示/隐藏对应区块、加载内容等）
    switchPageSection(targetSection);
    
    // 用replaceState把URL替换为根域名，不会在浏览器历史中留下记录
    history.replaceState(null, '', window.location.origin);
    // 如果希望保留历史记录（比如点击后退能回到上一个区块），改用pushState：
    // history.pushState({ section: targetSection }, '', window.location.origin);
  });
});

// 示例：页面内容切换函数
function switchPageSection(sectionId) {
  // 隐藏所有内容区块
  document.querySelectorAll('.page-section').forEach(section => {
    section.style.display = 'none';
  });
  // 显示目标区块
  document.getElementById(sectionId).style.display = 'block';
}

这种方式的核心是：通过replaceState或pushState修改URL但不触发页面刷新，同时前端负责内容的动态切换，用户看到的URL就一直是根域名。

2. .htaccess配置兜底，避免刷新404 #

当用户直接刷新页面或者手动输入其他路径时，需要服务器把所有非真实文件/目录的请求重定向回根域名，这时候就需要.htaccess来配置规则了。

下面是Apache服务器的.htaccess配置代码：

<IfModule mod_rewrite.c>
  RewriteEngine On
  
  # 如果请求的不是存在的文件或目录，就重定向到根域名
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ / [L,R=301]
</IfModule>

这条规则的作用是：如果用户访问的路径对应的文件或目录不存在，就301永久重定向到根目录，确保不管输入什么路径，最终都会回到根域名，同时前端会加载对应的默认内容（或根据历史状态恢复内容）。

3. 纯前端拦截（最简方案） #

如果不需要保留任何URL历史记录，甚至可以完全不修改URL，只做前端内容切换：只需要拦截菜单点击事件，阻止默认跳转，直接切换页面内容即可。这种情况下URL自然会一直保持根域名，不需要History API和服务器配置（但服务器配置依然建议加上，防止用户输入错误路径）。

补充说明 #

你提到的示例网站http://www.formationstone.com/，大概率采用的是前端拦截+History API替换URL配合.htaccess兜底的方案，这样既保证了URL的简洁性，又避免了刷新页面出现404的问题。

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