How to open a new tab in spa with vanilla JavaScript?

I am trying to make a SPA with html, css and vanilla JS (I have very little idea of JS). The problem I have is that the method I’m using, works correctly, but when I open one of the sections in a new tab, it does not address the web correctly and gives an error “Cannot GET”.
Is there any way to solve this, in a simple way, only with vanilla js?

const route = (event) => {
  event = event || window.event;
  event.preventDefault();
  window.history.pushState({}, "", event.target.href);
  handleLocation();
};

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 () => {
  const path = window.location.pathname;
  const route = routes[path] || routes[404];
  const html = await fetch(route).then((data) => data.text());
  document.getElementById("main-page").innerHTML = html;
};

window.onpopstate = handleLocation;
window.route = route;

handleLocation();