一个跨行前端的小白菜随笔 —— hash模式和history模式

Ajax的出现，让前后端实现了分离，用户交互不需要每次都刷新页面就可以获取数据。

在这之中，逐渐发展出了像SPA这样强大的异步交互，连页面都不需要刷新，自始至终就一个页面，这些都依赖于衍生出的前端路由。

个人认为，前端路由的核心，就是url的改变，并不会向后端发起请求。

在前端路由的概念出现之前，我们一般是通过在地址栏输入路径，向后端发起请求。换句话说，就是一旦输入了地址，就一定会发起数据请求。这样存在一个问题，就是有时候我们并不需要整个页面的数据，可能只需要这个页面中某一模块的数据。如果每次都发起对整个页面的请求，对服务器和用户来说，都不友好。

那么前端路由是如何做到，当url改变时，并不会向后端发起请求呢？

答案是通过类似劫持url，再解析来匹配路由。以vue-router为例，它有两种模式。

 

一、hash模式

通过一个符号“#”，#后面的路径值就是hash，hash的变化，并不会引起页面的改变。我们只需要通过解析#号后面的hash值，然后进行dom替换并且发起我们想发送的异步请求就行了。

由于hash值的改变会触发一个hashchange事件，我们只需要在这个事件里面进行一些操作就行了。

这里补充一下跳转类型，分为：后退、刷新、地址栏链接（如下图），刷新不会触发hashchange，因为hash值没有发生变化

 

二、history模式

在history模式中，并没有#号，在地址栏输入路径，原本应该会对服务端发起请求，但是却被一些事件强行重定向到了根页面。

这些事件，就是HTML5中新增添的pushState（） 和 replaceState（）以及onpopstate 事件

 this.$router.push('/Home');

当然，我们讲了跳转类型还有有：后退、刷新、地址栏链接，上面属于pushState放入history栈中的操作，而刷新、地址栏链接依然会向服务器发请求，这时，需要服务器来做重定向。（这也就是为什么前端打包之后的文件，在刷新之后，会报404的错误）。而后退操作，则会触发onpopstate 事件。