Hash 与 Hashbang

前言

SPA (Single Page Application) 在web 2.0时期成长迅速，当然SPA应用的流行自然离不开前端Route的兴起，现在流行的MVVM框架都是由前端控制路由分发，用AJAX 和 前端Route能带给用户很好的体验，当然，对于SEO也是一场莫大的灾难，因为AJAX 应用不会留下历史记录(history)。今天来浅谈一下因SPA应用而引发的Hash 和 Hashbang

Hash

web里的hash不同于其他高级语言中的hash（散列），其他高级语言中的Hash为一种数据结构，而浏览器里的hash是url #后面的内容。

例如：

https://www.baidu.com#woshihash

当然，在访问的过程中会经历URL转码。
#后面的东西能带给我们什么好处呢，最大的好处就是促使AJAX应用的兴起，因为hash的内容不会被提交。因此，我们在后端是不能直接拿到hash里的内容的。

AJAX应用

在AJAX应用中，页面获取数据都是用AJAX与后端进行交互，因此，整个页面都处于 “单页面”的状态，这样的话我们的页面也就无法进行前进和返回操作，幸运的是，由于h5的出现，提供了history的API，使我们能够手动添加历史记录，并在hash 里记录下当前页面的信息。

例如 一个某网站的主页面：

http://localhost:8080#main

转到登录页面后，整个页面并没有被整体刷新，而是利用AJAX获取到信息之后渲染上去。
现在就是形如这样的一个url

http://localhost:8080#login

这样的AJAX 应用程序能使页面长期处于无阻塞状态，给用户带来很好的体验，尤其是在web2.0时代兴起的webapp。

但是现在有个非常致命的问题，因为页面与服务器的交互完全基于AJAX，这就导致页面一直处于单页状态，这就给SEO带来很大的问题，比如百度的爬虫来爬取信息的时候，会是一片空白，因为网页完全基于AJAX，地址栏hash后面默认不会被爬虫爬到。

于是Hashbang诞生了.

Hashbang

这是一个由google提出的点子，hashbang的url风格形如

http://lcoalhost:8080#!woshihashbang

如果用RESTful风格的登录页面应该是这样的

http://localhost:8080/#!/user/login

虽然# 后面的内容默认不会被爬虫爬到，但是如果是hashbang，那么爬虫会认为爬到的是个SPA应用，因此，它会自动爬去到hash里的内容，现在知道了，hashbang就是为了解决AJAX应用的SEO问题而诞生的