前端路由实现方式

1. history模式

2. hash模式

history路由模式的实现，是要归功于HTML5提供的一个history全局对象，可以将它理解为其中包含了关于我们访问网页（历史会话）的一些信息。同时它还暴露了一些有用的方法，比如：

• window.history.go 可以跳转到浏览器会话历史中的指定的某一个记录页

• window.history.forward 指向浏览器会话历史中的下一页，跟浏览器的前进按钮相同

• window.history.back 返回浏览器会话历史中的上一页，跟浏览器的回退按钮功能相同

• window.history.pushState 可以将给定的数据压入到浏览器会话历史栈中

• window.history.replaceState 将当前的会话页面的url替换成指定的数据

而history路由的实现，主要就是依靠于pushState与replaceState实现的，这里我们先总结下它们的一些特点。

都会改变当前页面显示的url，但是都不会刷新页面

hash模式：

我们都知道一个URL是由很多部分组成，包括协议、域名、路径、query、hash等，比如上面的例子，我们点击不同模块的时候可能看到是这样的URL

• 首页：yourdomain.xxx.com/index.html/#/

• 商城：yourdomain.xxx.com/index.html/#/shop

• 购物车：yourdomain.xxx.com/index.html/#/shopping-cart

• 我的：yourdomain.xxx.com/index.html/#/mine

#号后面的，就是一个URL中关于hash的组成部分，可以看到，不同路由对应的hash是不一样的，但是它们都是在访问同一个静态资源index.html。我们要做的，就是如何能够监听到URL中关于hash部分发生的变化，从而做出对应的改变。

其实浏览器已经暴露给我们一个现成的方法hashchange，在hash改变的时候，触发该事件。有了监听事件，且改变hash页面并不刷新，这样我们就可以在监听事件的回调函数中，执行我们展示和隐藏不同UI显示的功能，从而实现前端路由。

作者：麻不烧

链接：https://juejin.cn/post/7127143415879303204

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。