浅析一波路由的hash 和 history 的区别与实现原理以及服务器刷新404的问题及解决方法

APICloud 发布于2019-08-26 10:12 / 3404人阅读

摘要：满足单页面的需求。的原理略微复杂一点，它可以通过去变动内容，不会造成页面刷新。既然浏览器不会刷新。这样的话，就可以做到刷新页面不崩的效果。如果有服务器部署基础的可以拿此类的服务器试试，我自己这边是默默地拿着配置成功了

先解释下基本概念
hash
hash 不是那个哈希算法，就是以前url用的锚点，以前是多用来定位页面展示内容。代表符号是“#”
之所以用hash是因为他既可以获取到，又可以不去刷新页面也不去请求服务器。满足单页面的需求。
一般写法: 就如说我们的思否 https://segmentfault.com/#a/b... 你在控制台输入 window.location.hash，就会出现#a/b/c/d
history
就是url ，也比如说我们的思否,我现在写文章的页面 https://segmentfault.com/write，你在浏览器输入 window.location.pathname 就会输出 /write，但是单页面路由中的url主要目的是用来存储路由变量的

基本概念说完了，说下原理

hash 的原理比较简单粗暴易理解，因为锚点本身就是基于单页面的一种页面定位功能，获取页面的hash值相当于可以直接获取路由的变量，实现按需加载子页面。

history 的原理略微复杂一点，它可以通过history.pushState(state, title, url)去变动url 内容，不会造成页面刷新。这里state 可以存一些params值，title 随便传值吧目前没什么用。url 就是要变动的url。既然浏览器不会刷新。那么和hash 就变成一样的效果了, 但是比hash美观。

讲一下区别

hash 是一个真实的url，它利用锚点#来实现单页面，只要锚点前的地址不会，这个页面就不会刷新,即便刷新了，也能立即获取到路由参数（#后面的内容）

history 是一个虚假的url, 他就像你用代码去在地址栏敲了url，并且，没按回车 你一旦按了回车，那基本上就崩了，因为浏览器会真的去请求这个虚假的url。那么自然就崩了。（前端开发的时候没崩是因为dev包把这个问题都解决了，但是生存环境的服务器并没有去主动解决，所以部署以后就崩，所以需要手动解决一下）

然后说一下history 的解决方法，解决方法有很多，我个人喜欢重定向的方法。
首先服务器将所有的页面方面的请求均 重定向 到初始页上面，这样的话，url就不至于请求不到页面（当然嫌麻烦的可以直接把404重定向到初始页面）
然后在前端最外层页面写一个地址解析（一般框架都应该有写好，我这里是说自己写路由插件），相当于获取到路由所需参数。

这样的话，就可以做到刷新页面不崩的效果。

如果有服务器部署基础的可以拿nginx此类的服务器试试，我自己这边是默默地拿着notepad配置成功了......

服务器托管私有云解决问题的方法回调的原理、实现与应用云服务器问题及解决方法租用idc机房解决的问题和带来的效益

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105758.html

vue-router实现原理

摘要：我们知道是的核心插件，而当前项目一般都是单页面应用，也就是说是应用在单页面应用中的。原理是传统的页面应用，是用一些超链接来实现页面切换和跳转的其实刚才单页面应用跳转原理即实现原理实现原理原理核心就是更新视图但不重新请求页面。近期面试，遇到关于vue-router实现原理的问题，在查阅了相关资料后，根据自己理解，来记录下。我们知道vue-router是vue的核心插件，而当前vue项目...

vibiu 2019-08-23 16:09 评论0 收藏0
[实践系列]-前端路由

摘要：而应用便是基于前端路由实现的所以便有了前端路由。因为两种模式都需要调用一个方法来实现不同路由内容的刷新前端路由路由列表匹配当前的路由匹配不到则使用配置内容并渲染下面我们来实现两种模式。什么是路由? 路由这概念最开始是在后端出现的,在以前前后端不分离的时候,由后端来控制路由,服务器接收客户端的请求,解析对应的url路径,并返回对应的页面/资源。简单的说路由就是根据不同的url地...

guyan0319 2019-08-23 14:39 评论0 收藏0
理解路由

摘要：服务器端路由对于服务器来说，当接收到客户端发来的请求，会根据请求的，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。客户端路由对于客户端通常为浏览器来说，路由的映射函数通常是进行一些的显示和隐藏操作。原文地址：http://syaning.com/2017/01/10... ♪ 理解Web路由 1.什么是路由在Web开发过程中，经常会遇到『路由』的概念。那么，到...

BLUE 2019-08-20 13:52 评论0 收藏0
彻底理清前端单页面应用（SPA）的实现原理【精读源码】

showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 随着React Vue前端框架的兴起，出现了Vue-router,react-router-dom等前端路由管理库，利用他们构建出来的单页面应用，也是越来越接近原生的体验，再也不是以前的点击标签跳转页面，刷新整个页面了，那么他们的原理是什么呢？优质gitHub开源练手项目： ...

xiaodao 2019-08-02 15:39 评论0 收藏0