可以，且非常轻量——location.hash不触发刷新，hashchange事件可靠捕获变化，十几行代码即可实现路由跳转、视图切换和历史导航。
可以，而且非常轻量——location.hash 本身不触发页面刷新，hashchange 事件能可靠捕获每次变化，两者配合只需十几行代码就能实现路由跳转、视图切换和历史导航。
核心机制要理清
浏览器对 URL 中 # 后的内容（即 hash）有特殊处理：修改 location.hash 不会重载页面；每次变化自动存入浏览器历史栈，支持前进/后退；服务端完全收不到 hash 部分，无需 Nginx 或后端配置。这些特性天然适配单页应用的前端路由需求。
- hash 值始终带开头的
#，取路径要用location.hash.slice(1) - URL 是
https://site.com/#/user/123，location.hash拿到的是#/user/123，不是/user/123 -
hashchange事件不冒泡、不可取消，只在 hash 真正变化时触发 - 页面首次加载带 hash（如直接访问
https://site.com/#/about）时，hashchange不会自动触发，必须手动执行一次路由匹配
关键监听与初始化不能漏
必须同时监听两个时机：页面加载完成（load）和后续 hash 变化（hashchange）。否则用户直接访问带 hash 的链接，首屏不会渲染对应内容。
- 用
window.addEventListener('load', handler)处理初始加载 - 用
window.addEventListener('hashchange', handler)处理后续跳转 - 两个 handler 必须是同一个函数，且需绑定正确上下文（推荐箭头函数或
.bind(this)） - 避免写成
location.href = '#/home'—— 这会整页跳转；应始终用location.hash = '/home'
极简路由对象只需三步
定义一个轻量 Router 类，不依赖任何框架，纯原生 JS 即可运行：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
-
注册路由：调用
router.route('/home', () => { /* 渲染首页 */ }) -
匹配并执行：
refresh()函数读取当前 hash 路径，查表执行对应回调 -
启动监听：
init()绑定load和hashchange事件
示例片段：
function Router() { this.routes = {}; }
Router.prototype.route = function(path, cb) { this.routes[path] = cb; };
Router.prototype.refresh = function() {
const path = location.hash.slice(1) || '/';
if (this.routes[path]) this.routes[path]();
};
Router.prototype.init = function() {
this.refresh(); // 首次加载立即执行
window.addEventListener('hashchange', () => this.refresh());
};
// 使用
const router = new Router();
router.route('/', () => console.log('首页'));
router.route('/user', () => console.log('用户页'));
router.init();跳转方式要统一且安全
所有跳转都应通过修改 location.hash 完成，确保行为一致、可预测：
- HTML 内写
<a href="#/user">用户</a>，点击自动触发hashchange - JS 中调用
location.hash = '/post/42'，不要拼接完整 URL - 避免混用
history.pushState：它和 hash 模式历史栈互不感知，混用会导致前进/后退错乱 - 如需异步加载，可在路由回调里用
fetch获取模板或数据，再更新 DOM
