如何用原生JavaScript解决SPA中新标签页打开报错问题

问题原因 #

你当前使用的是history模式路由，正常浏览时通过JS修改浏览器历史记录，不会向服务器发起请求，所以能正常工作。但新标签页打开路由路径时，浏览器会直接向服务器请求/vehicles这类路径，而服务器上没有对应文件，就会返回「Cannot GET」错误。

纯原生JS解决办法：改用Hash模式路由 #

Hash模式（路径带#，比如/#/vehicles）下，#后面的内容不会发送给服务器，浏览器只会请求根页面，完全由前端处理路由，不需要修改服务器配置。

修改后的完整代码 #

// 处理路由跳转
const route = (event) => {
  event = event || window.event;
  event.preventDefault();
  // 设置目标hash
  const targetHash = event.target.getAttribute("href");
  window.location.hash = targetHash;
};

// 路由映射表
const routes = {
  404: "./pages/404.html",
  "#/": "./pages/index.html",
  "#/vehicles": "./pages/vehicles.html",
  "#/services": "./pages/services.html",
  "#/contact": "./pages/contact.html",
  "#/financing": "./pages/financing.html",
  "#/locations": "./pages/locations.html",
};

// 加载对应页面内容
const handleLocation = async () => {
  // 获取当前hash，默认回到首页
  const hash = window.location.hash || "#/";
  const route = routes[hash] || routes[404];
  const html = await fetch(route).then((data) => data.text());
  document.getElementById("main-page").innerHTML = html;
};

// 监听hash变化事件
window.addEventListener("hashchange", handleLocation);
// 全局挂载路由函数
window.route = route;

// 页面初始化时加载对应内容
handleLocation();

页面链接修改 #

把页面中所有路由链接的href改成带#的格式，比如：

<!-- 原链接 -->
<a href="/vehicles" onclick="route()">车辆</a>
<!-- 修改后 -->
<a href="#/vehicles" onclick="route()">车辆</a>

这样修改后，无论是正常点击跳转还是新标签页打开链接，都能正确加载对应页面，不会再出现「Cannot GET」错误。

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