Question

我的路由有问题。我在路由中使用了 Vanilla javascript 并且它有效，但是当我从 http://127.0.0.1:5500/ 转到 http://127.0.0.1:5500/about 然后刷新关于页面Cannot GET/about

我的 javascript 代码 - router.js 文件

<块引用>

const rootDiv = document.getElementById("root");

let home = "";
let about = "";
let contact = "";
let profile = "";

/**
 * @param {String} page
 * @returns {String}
 */

const loadPage = async (page) => {
  const response = await fetch(page);
  const resHtml = await response.text();
  return resHtml;
};

const loadAllPages = async () => {
  home = await loadPage("home.html");
  about = await loadPage("about.html");
  contact = await loadPage("contact.html");
  profile = await loadPage("profile.html");
};

const main = async () => {
  await loadAllPages();
  rootDiv.innerHTML = home;
  routes = {
    "/": home,
    "/contact": contact,
    "/about": about,
    "/profile": profile,
  };
};

main();

/**
 * @param {String} pathname
 */
const onNavigate = (pathname) => {
  window.history.pushState({}, pathname, window.location.origin + pathname);
  rootDiv.innerHTML = routes[pathname];
};

window.onpopstate = () => {
  rootDiv.innerHTML = routes[window.location.pathname];
};

为什么我会收到这个错误？有人能帮我解决这个问题吗？所有 HTML 文件都在同一目录中。任何帮助在这里将不胜感激！谢谢！！

Vanilla Javascript - 无法获取/路由 - 错误

0 个答案: