Vanilla JS实现前端路由跳转后刷新报Cannot GET错误求解

你实现的是History模式的前端路由，pushState API仅修改浏览器地址栏和历史记录，不会真实向后端服务器发起资源请求，因此前端跳转时功能正常。
但刷新页面时，浏览器会主动将当前地址栏的完整路径/about发送给静态资源服务器请求资源，你使用的静态服务器（如VSCode Live Server）根目录下不存在/about对应的实体文件/路由规则，因此直接返回404错误。

可以根据你的使用场景选择以下任意一种方案：

• 方案1：改用Hash模式前端路由（无需修改服务器配置，适合本地快速开发）
  Hash模式通过地址栏#后的路径标识路由，浏览器发送请求时会自动丢弃#后的内容，服务器永远返回根路径的index.html，不会出现404问题。
  修改代码示例：

// 路由匹配改为取hash值
const getCurrentPath = () => window.location.hash.slice(1) || "/"

const onNavigate = (pathname) => {
  window.location.hash = pathname
  rootDiv.innerHTML = routes[pathname]
}

// 监听hash变化替换popstate监听
window.addEventListener('hashchange', () => {
  rootDiv.innerHTML = routes[getCurrentPath()]
})

// main函数初始化时优先读取当前hash渲染
const main = async () => {
  await loadAllPages();
  // 补充变量声明，避免隐式全局变量
  const routes = {
    "/": home,
    "/contact": contact,
    "/about": about,
    "/profile": profile,
  };
  rootDiv.innerHTML = routes[getCurrentPath()];
};

• 方案2：保留History模式，修改静态服务器配置
  所有请求统一重定向到根目录的index.html，由前端JS接管路由渲染逻辑，不同服务端的配置参考：
  • VSCode Live Server：安装Live Server Web Extension插件，开启History Mode支持即可
  • Nginx：在配置文件中添加try_files $uri $uri/ /index.html;
  • Node.js服务：使用connect-history-api-fallback中间件处理路由重定向
    注意如果选择History模式，上线部署时也需要对应配置生产环境的服务端重定向规则，否则线上也会出现刷新404问题。

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