如何移除URL中的#符号 实现锚点跳转显示斜杠路径格式

核心实现逻辑是拦截原生锚点跳转行为，用JS手动控制滚动定位，同时通过History API修改地址栏显示内容，全程不触发页面刷新，还要配套处理路径直接访问、浏览器前进后退的兼容问题，具体步骤如下：

1. 调整导航链接写法 #

把原来带#锚点的href替换成你要显示的路径地址，新增自定义属性存储目标区块的id，方便JS定位：

<a class="nav-link" href="/home/about" data-target-section="about">About</a>

如果你的站点不是纯单页应用，必须先配置路由/服务端重写规则：把/home/about这类自定义路径全部指向当前home页面，否则用户直接访问该路径会报404错误。

2. 拦截点击事件实现自定义跳转 #

给导航链接绑定点击事件，阻止a标签的默认跳转行为，手动滚动到对应区块后修改地址栏内容：

document.querySelectorAll('.nav-link').forEach(navLink => {
  navLink.addEventListener('click', function(e) {
    e.preventDefault();
    const targetSectionId = this.dataset.targetSection;
    const showPath = this.getAttribute('href');
    const targetEl = document.getElementById(targetSectionId);

    if (targetEl) {
      // 滚动到目标区块，和原生锚点行为一致，需要平滑滚动把behavior改成smooth即可
      targetEl.scrollIntoView({ behavior: 'auto' });
      // 修改地址栏，不会触发页面刷新
      history.pushState(null, '', showPath);
    }
  });
});

3. 兼容直接访问、前进后退场景 #

用户直接输入路径地址访问、或者点击浏览器前进后退按钮时，需要自动定位到对应区块：

function matchSectionAndScroll() {
  // 从当前路径提取区块id
  const pathList = window.location.pathname.split('/').filter(item => item);
  const currentSectionId = pathList.at(-1);
  const targetEl = document.getElementById(currentSectionId);
  if (targetEl) {
    // 等DOM渲染完成再滚动，避免定位偏移
    setTimeout(() => targetEl.scrollIntoView({ behavior: 'auto' }), 0);
  }
}
// 页面首次加载时匹配路径滚动
document.addEventListener('DOMContentLoaded', matchSectionAndScroll);
// 监听浏览器前进后退，同步滚动位置
window.addEventListener('popstate', matchSectionAndScroll);

4. 必做的路由/服务端配置 #

• 前端路由项目（Vue/React等）：将/home、/home/about等所有导航对应路径，都指向同一个home页面组件即可
• 静态站点（Nginx/Apache托管）：配置重写规则，将/home/*下的所有路径都重定向到home页面对应的html文件，避免404

该方案全程不会修改URL的hash部分，地址栏始终显示干净的路径格式，和原生锚点跳转的体验完全一致，不会出现页面刷新的情况。

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