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 这个页面) ->

history 路由 vs hash 路由 vs location.href 实现跳转相关推荐

location.href不跳转的解决办法
location.href不跳转的解决办法相信很多人通过链接的onclick事件做跳转操作时,出现location.href不跳转的问题,下面对onclick事件中location.href的几种测 ...
location.href不跳转、不执行的最有效的解决办法！
最近在js中希望通过location.href进行跳转,在网络上查询了很多资料,困扰了很久.现在把解决的思路记录一下. 如果你的不跳转,你可以先写个测试,看程序是否进行到这一步. 如果执行到这一步,那 ...
前端路由之hash路由与history路由 Orz
什么是路由路由这个概念最先是后端出现的.在以前用模板引擎开发页面时,经常会看到这样 http://hometown.xxx.edu.cn/bbs/forum.php 有时还会有带.asp或.html ...
ajax请求成功后location.href没有跳转
错误原因: 注意起来一个情况:ajax+submit+同步--就是你用ajax请求服务器,而且用的是同步的方式,并且你是通过点击了type类型为submit的按钮来触发这个ajax. 这个时候,首先你 ...
IE6环境下遭遇winow.location.href=''的跳转bug
<script type="text/javascript"> function goUrl(x) { window.location.href=x; } & ...
js小案例：使用location.href自动跳转页面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
ajax里怎么添加跳转地址,Ajax中window.location.href无法跳转的解决办法
$("#myForm").submit(function(){ $.ajax({ cache: true,type: "POST",url: "/Ba ...
js设置了location.href不跳转问题
今天碰到一个问题,用JS设置了location.href就是不跳转的问题.代码如下: $('#gofriendtab').on('click', function() { ...
微信BUG之微信内置的浏览器中window.location.href 不跳转
最近做微信开发遇到这个问题,查了一些文档,总结一下 1.url后面加参数 indow.location.href = url +'?timestamp='+ new Date().getTime()+ ...

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

history 路由 vs hash 路由 vs location.href 实现跳转相关推荐

最新文章

热门文章