前端路由的两种模式hash模式和 history模式

前端路由实现方式

在单页面web网页中, 单纯的浏览器地址改变，网页不会重载，如单纯的hash网址改变网页不会变化，因此我们的路由主要是通过监听事件，并利用js实现动态改变网页内容，有两种实现方式：

    hash模式：监听浏览器地址hash值变化，执行相应的js切换网页
    history模式：利用history API实现url地址改变，网页内容改变

hash与history的区别

备注：

• 如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传。
• 其功能也有区别，比如我们在开发app的时候有分享页面，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，会被标记为不合法。所以要将#号去除那么就要使用history模式。

hash模式

概述：hash指的是地址中#号以及后面的字符，这个#就是hash符号，中文名哈希符或锚点，哈希符后面的值，我们称之为哈希值。如 http://localhost/index.html/#/hello，这里的#/hello就是hash。
 
特点：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
 
路由的哈希模式其实是利用了window可以监听onhashchange事件，可以实现监听浏览器地址hash值变化，执行相应的js切换网页。这么一来，即使前端并没有发起http请求它也能够找到对应页面的代码块进行按需加载。

history模式

概述：window.history 属性指向 History 对象，它表示当前窗口的浏览历史。当发生改变时，只会改变页面的路径，不会刷新页面。History 对象保存了当前窗口访问过的所有页面网址。
 
下面介绍一下H5新推出的两个神器：pushState()与replaceState()方法
 
作用：就是可以将url替换并且不刷新页面。在hash模式下，前端路由修改的是#中的信息，而浏览器请求时不会将 # 后面的数据发送到后台，所以没有问题。但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，则会刷新出来404页面。
 

如何去解决history模式下刷新报404的弊端呢？
这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html），前后端联手。

 
History.pushState()
 
该方法用于在历史中添加一条记录。pushState()方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有变化。

语法：history.pushState(object, title, url)

该方法接受三个参数，依次为：

• object：是一个对象，通过 pushState 方法可以将该对象内容传递到新页面中。如果不需要这个对象，此处可以填 null。
• title：指标题，几乎没有浏览器支持该参数，传一个空字符串比较安全。
• url：新的网址，必须与当前页面处在同一个域。不指定的话则为当前的路径，如果设置了一个跨域网址，则会报错。

var data = { foo: 'bar' };
history.pushState(data, '', 'test.html');
console.log(history.state) // {foo: "bar"}

注意：如果 pushState 的 URL 参数设置了一个新的锚点值（即 hash），并不会触发 hashchange 事件。反过来，如果 URL 的锚点值变了，则会在 History 对象创建一条浏览记录。

History.replaceState()

该方法用来修改 History 对象的当前记录，用法与 pushState() 方法一样。

假定当前网页是 example.com/example.html。

history.pushState({page: 1}, '', '?page=1')
// URL 显示为 http://example.com/example.html?page=1

history.pushState({page: 2}, '', '?page=2');
// URL 显示为 http://example.com/example.html?page=2

history.replaceState({page: 3}, '', '?page=3');
// URL 显示为 http://example.com/example.html?page=3

history.back()
// URL 显示为 http://example.com/example.html?page=1

history.back()
// URL 显示为 http://example.com/example.html

history.go(2)
// URL 显示为 http://example.com/example.html?page=3

总结:
传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发。

而 前端路由 🔍是不涉及服务器的，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。

这篇好文章是转载于：学新通技术网