Open
Description
| Name | 🏠 | License | 相容 | dependencies | 說明 / 備註 |
|---|---|---|---|---|---|
| Crossroads.js | 🏠 | MIT | JS-Signals | ||
| Davis.js | MIT | jQuery | |||
| director | MIT | 無 | director.js 簡明中文教學 - 羋老頭@博客園 | ||
| Finch.js | 🏠 | MIT | 無 | ||
| page.js | 🏠 | MIT | IE8+ | [path-to-regexp] | |
| PathJS | 🏠 | MIT | IE7+ | 無 | |
| (itorr) Q.js | Apache 2.0 | 無 | Q.js放棄了 HTML5 State，通過#!格式的 url hash 重現了 url 路由功能 | ||
| router.js | MIT | ||||
| router5 | MIT | ||||
| Sammy.js | 🏠 | MIT | jQuery | ||
| StateMan | 🏠 | MIT | IE6+ | 無 | 特色：處理深層次的路由，複雜的單頁應用 |
疑難排解
使用了前端路由後與HTML錨點(anchor)衝突
解法: 放棄HTML錨點使用JS錨點
let scrollToAnchor = (anchorName) => {
if (anchorName) {
let anchorElement = document.getElementById(anchorName); // 要跳轉到的元素
if(anchorElement){ anchorElement.scrollIntoView(); } // 如果對應元素存在，就捲動到該位置
}
}參考
- 前端路由是什么东西？ - 知乎
- 前端路由实现原理 - 知乎
- 前端路由一探 | The World of TomasRan
- 从history api看主流框架的路由机制 xiyuyizhi/notes#9 從history api看主流框架的路由機制
- 前端路由实现与 react-router 源码分析 joeyguo/blog#2 前端路由實現與 react-router 源碼分析
- 前端利器之路由库 SiZapPaaiGwat/inhuman-cpc.github.io#3 前端利器之路由庫
- Javascript Routing - JSter Javascript Catalog
- Routing - JSwiki
- React-router錨點跳轉的解決方案 - 簡書
- 「前端进阶」彻底弄懂前端路由 - 掘金
- 一文读尽前端路由、后端路由、单页面应用、多页面应用 - 掘金
- 淺談前後端路由與前後端渲染 - 掘金
- StateMan：創建一個簡單的SPA實例(二) - CSDN前端知識共享
- 前端單頁路由《stateman》源碼解析 - 掘金