如何在Electron环境下使用原生JavaScript实现单页应用路由？

Electron环境下加载本地页面时默认使用file://协议，此时location.pathname返回index.html在本地磁盘的绝对路径（例如Windows环境下值为/C:/your/app/path/index.html），该值固定不随路由跳转变化，无法匹配常规的路由路径规则。且file协议下无法支持原生History API的路径模拟，直接套用web端的history路由逻辑会触发Electron的本地文件查找，出现页面加载失败的问题。

方案1：优先使用Hash路由（零额外配置，兼容全场景） #

Hash路由完全基于原生浏览器API实现，不依赖文件路径规则，不管是web环境还是Electron的file协议环境都能稳定运行：

1. 编写通用路径提取逻辑，兼容web和Electron环境，不再直接读取location.pathname：

   const getCurrentRoutePath = () => {
     // 清洗hash值，去掉开头的#
     const hashValue = location.hash.replace(/^#\/?/, '');
     // 没有hash时默认返回根路径
     return hashValue ? `/${hashValue}` : '/';
   }
   

2. 修正原有路由代码的隐性bug：原代码中view字段在路由表定义阶段就会直接执行console.log，根本等不到路由匹配触发，需要把视图逻辑包裹成函数：

   const routes = [
     { path: "/", view: () => console.log("Viewing /") },
     { path: "/login", view: () => console.log("Viewing login") },
     { path: "/dashboard", view: () => console.log("Viewing dashboard") },
   ];
   

3. 重写路由匹配逻辑，同时监听页面加载和hash变化事件：

   const router = () => {
     const currentPath = getCurrentRoutePath();
     // 匹配对应路由
     const matchedRoute = routes.find(route => route.path === currentPath);
     if (matchedRoute) matchedRoute.view();
   }
   
   // 触发路由的两个场景
   window.addEventListener("load", router); // 初始页面加载
   window.addEventListener("hashchange", router); // hash路由跳转
   

这种方案下做路由跳转只需要修改hash值即可，比如点击跳登录页直接执行location.hash = '/login'，不需要额外处理路径问题。

方案2：自定义状态路由（实现无#的类History路由效果） #

如果不想在URL里带#后缀，可以完全脱离location对象，自己维护全局路由状态，绕开file协议的路径限制：

1. 初始化全局路由状态，拦截原生history的跳转逻辑：

   // 全局保存当前路由
   let currentRoute = '/';
   // 重写pushState方法，不实际修改浏览器地址栏的文件路径
   const originalPushState = history.pushState;
   history.pushState = function(state, title, path) {
     currentRoute = path;
     // 触发路由重新匹配
     router();
   }
   

2. 路由匹配逻辑直接读取全局保存的currentRoute值即可，完全不依赖location.pathname。
3. 全局拦截a标签的默认跳转行为，避免触发Electron的文件查找：

   document.addEventListener('click', (e) => {
     if (e.target.matches('a')) {
       e.preventDefault();
       const targetHref = e.target.getAttribute('href');
       // 调用自定义pushState跳转
       history.pushState({}, '', targetHref);
     }
   })
   

• 不要在Electron的file协议环境下强行读取location.pathname做路由匹配，该值固定指向本地index.html的磁盘路径，不会随路由跳转更新
• 路由表里的视图逻辑必须包裹为函数，避免在定义路由表时就提前执行
• 不要依赖a标签的默认跳转行为，否则会触发Electron的文件系统查找逻辑，导致页面加载失败

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