history 路由 vs hash 路由 vs location.href 实现跳转

• location.href 直接页面跳转了 => 重新请求页面了 -> 刷新
• history => 改变 url 但是页面不刷新 ，没有重新请求后端的页面，用到了 history api -> UI 怎么变, 是因为路由库监听了 url 变化，展示对应的 UI 试图
• hash => # 锚点，不会重新请求页面 => 是因为路由库监听了 url 变化，展示对应的 UI 试图

a.com
浏览器 -> 后端服务(express/koa )

● 前端路由 -> 浏览器 url 栏里展示的 。 e.g. https://baobao-dcsj.yuque.com/staff-rdwofm/tw6ocq/exnnflh94is0p390

● 后端路由 -> /staff-rdwofm/tw6ocq/exnnflh94is0p390
○ /staff-rdwofm/tw6ocq/exnnflh94is0p392
○ /staff-rdwofm/tw6ocq/exnnflh94is0p392
○ /test
○ /api/getList -> 文章列表 json
没有的直接映射到 index.html

---

webpack devServer historyApiFallback - 本地 线上 - 服务有相应的 fallback 逻辑/ nginx 配置了 fallback

---

history 路由

http://localhost:9000 (index.html) -> http://localhost:9000/list (hsitory api, 没有请求后端 html) -> 可以正常展示 -> 页面刷新 cmd + r -> http://localhost:9000/list (向后端请求 /list 这个页面) -> 没有 /list 页面 xxxx

fallback /index.html

hash 路由

localhost:9000#list

http://localhost:9000 (index.html) -> http://localhost:9000#list (hsitory api, 没有请求后端 html) -> 可以正常展示 -> 页面刷新 cmd + r -> http://localhost:9000#list (向后端请求 /index.html 这个页面) ->