概述
对于当下组件化的 SPA 应用,前端路由是一个重要组成部分,不管是 react 还是 vue,都有各自的前端路由插件。那么前端路由的基础是什么呢?本文针对 hash 与 history 模式的实现基础做个总结。测试源码
详述
对于单页面应用,每个页面都是组件,页面切换即组件切换,前端路由要实现的就是页面的切换,不引起刷新,同时浏览器的 history 对象中都有记录,这样才能保证“前进”“后退”有效。
hash 模式
hash 是 URL 中的 hash 部分,直观表现为#及其后面的部分,例如#/dashboard
。通常通过 a 标签实现页面锚点定位。特点就是改变 hash 部分不会引起页面的刷新,但是却可以触发 hashchange 事件。因此可以通过这个特性实现前端路由。
history 模式
HTML5 引入了 history.pushState() 和 history.replaceState() 方法,它们分别可以添加和修改历史记录条目。这些方法通常与 window.onpopstate 配合使用。因此也可以通过这个特性实现前端路由。API 详细知识见 MDN
两种模式的优缺点
hash 模式兼容性好,简单,但是不美观。history 模式美观,但是不兼容 IE8 及以下,刷新会报错,需要后端配置处理。
简单实现
糙了一点,但是对于理解两种模式的路由基础实现应该可以了。
1 | window.addEventListener("DOMContentLoaded", readyHandler); |