Vanilla JS项目中window.location.hash返回空字符串问题求助

问题诊断 #

你的问题本质是URL中的ID没有被识别为hash（#开头的部分），所以window.location.hash返回空。手动加#后，ID变成了hash的一部分，自然能通过slice(1)获取到。

可能的原因&对应解决方案 #

1. 跳转链接未添加#前缀

如果页面跳转是通过普通链接（比如<a href="123">），ID会被当作路径的一部分，而非hash。需要把链接修改为<a href="#123">，跳转后URL会变为xxx.com/#123，此时window.location.hash的值为#123，slice(1)就能正确拿到123。

2. 未监听hash变化事件

如果仅在页面初始化时执行controlRecipe，可能浏览器还未完成hash的更新。可以通过监听hashchange和load事件，确保hash更新或页面加载时触发函数：

// 在控制器模块中添加事件监听
['hashchange', 'load'].forEach(event => window.addEventListener(event, controlRecipe));

3. 服务器路由模式导致ID在路径中

如果项目部署在服务器上且使用history模式路由，URL中的ID会被当作路径参数，此时需要通过pathname获取：

// 假设URL为xxx.com/123，pathname的值为"/123"，slice(1)拿到"123"
const id = window.location.pathname.slice(1);

注意：这种情况需要配置服务器fallback规则，避免刷新页面出现404。

验证步骤 #

可以在controlRecipe开头打印完整的window.location对象，确认hash、pathname等属性的实际值，快速定位ID所在位置：

console.log(window.location);

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