通过location.hash实现前端路由本质是监听url哈希值变化，不刷新页面即可模拟多页跳转；利用hashchange事件响应变化，配合路由映射表渲染对应视图，并注意编码、seo及现代替代方案。
通过 location.hash 实现前端路由，本质是监听 URL 中哈希（# 后面的部分）的变化，不触发页面刷新，从而模拟多页面跳转效果。这是早期单页应用（SPA）常用的方式，兼容性好，实现轻量。
location.hash 的基本特性
location.hash 是 BOM 中 location 对象的属性，读取时返回当前 URL 中 # 及其后面的内容（含 #），写入时会更新地址栏哈希值且不会导致页面重载。
- 读取：
console.log(location.hash); // 如 "#/user?id=123" - 设置：
location.hash = "/about"; // 地址栏变为 https://example.com/#/about - 注意：
hash值始终包含开头的#，建议统一处理（如用hash.slice(1)提取路径）
监听 hash 变化：使用 hashchange 事件
浏览器在用户点击链接、JS 修改 location.hash 或浏览器前进/后退时，会触发 window 上的 hashchange 事件。
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
- 绑定监听：
window.addEventListener('hashchange', handler) - 首次加载时 hash 可能已有值，需手动调用一次
handler初始化视图 -
event.oldURL和event.newURL可获取变化前后的完整 URL（部分旧版 IE 不支持，可忽略）
简易路由映射与渲染逻辑
定义路由表，将哈希路径映射到对应组件或渲染函数，再根据当前 location.hash 执行渲染：
const routes = {
'/home': () => document.getElementById('app').innerHTML = '<h2>首页</h2>',
'/user': () => document.getElementById('app').innerHTML = '<h2>用户页</h2>',
'/about': () => document.getElementById('app').innerHTML = '<h2>关于页</h2>'
};
function render() {
const path = location.hash.slice(1) || '/home'; // 默认 home
const route = routes[path] || routes['/home'];
route();
}
window.addEventListener('hashchange', render);
render(); // 首次加载也要渲染
补充细节与注意事项
实际使用中还需考虑几个关键点：
-
URL 编码：哈希中若含中文或特殊字符（如空格、
/），应使用encodeURIComponent编码，读取时用decodeURIComponent解码 -
历史记录：
location.hash变更会自动加入浏览器历史栈，支持原生前进/后退，无需额外操作 - SEO 与服务端：纯 hash 路由对 SEO 不友好，服务端无法感知 hash 值（它不发送给服务器），适合纯客户端应用
-
替代方案提示：现代项目推荐使用
History API（pushState/replaceState）配合popstate事件，可实现无#的美观 URL
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
