小蜗
专栏

前端路由实现

用原生 API 实现前端路由,先以 hashchange 与 Map 搭建 hash 路由,处理后退与历史记录问题,再基于 pushState 与 popstate 实现 History 路由,并比较两种方案的差异。

共 2 篇更新于 2020-02-17

  • 01基于hash实现前端路由

    文章用原生 API 实现 hash 路由:监听 hashchange 与 load 事件,用 Map 保存 hash 与回调的对应关系。后退功能借助历史数组和指针实现,并用 isBackOff 标记修正回调执行两次、历史记录错误的问题。

    2020-02-17

  • 02基于History实现前端路由

    利用 pushState 修改地址栏而不触发文档跳转,配合 popstate 监听前进后退,实现前端路由。文章用 Map 注册路径与回调,封装 Router 类处理页面加载,并拦截 a 标签的默认跳转,同时提到与 hash 路由的差异。

    2020-02-17