JavaScript笔记（前端路由入门）
参考网站：什么是前端路由，单页web应用（SPA）的简单介绍
1 路由
什么是路由？
路由是根据不同的url地址展示出来不同的内容或页面，常用于单页面引用（SPA）。
简单举例说明，假如我们有一台提供 Web 服务的服务器的网络地址是：10.0.0.1，而该 Web 服务又提供了三个可供用户访问的页面，其页面 URI 分别是：
http://10.0.0.1/http://10.0.0.1/abouthttp://10.0.0.1/concat
那么其路径就分别是 /，/about，/concat。
当用户使用 http://10.0.0.1/about 来访问该页面时，Web 服务会接收到这个请求，然后会解析 URL 中的路径 /about，在 Web 服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次路由分发，这个分发就是通过路由**来完成的。
以前路由都是后台做的，通过用户请求的url导航到具体的html页面，前端路由就是通过配置js文件，把这个工作拿到前端来做。
2 前端路由
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内（采用的是<div>切换显示和隐藏），从而实现UI与用户的交互。
由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。
这得益于ajax，我们可以实现无跳转刷新；又多亏了浏览器的 histroy 机制，我们用 hash 的变化从而可以实现推动界面变化。
2.1 hash 值
在 HTML5 的 history API 出现之前，前端的路由都是通过 hash 来实现的，hash 能兼容低版本的浏览器。如果我们把上面提到的 3 个页面用 hash 来实现的话，它的 URI 规则中需要带上 #，即：
http://10.0.0.1/http://10.0.0.1/#/abouthttp://10.0.0.1/#/concat
hash 值常常用来作为书签（如点击 <a href="#abc" >链接，页面会转化到其id属性为abc的可视模块上） ，hash 除了这个功能还有另一种含义：指导浏览器的行为，但不上传到服务器。即除了#号后面那段字符之外，改变url中的任何一个字符都会导致浏览器重新请求服务器。
所以可以这样理解：改变#后面的值不触发网页重载，但会记录到浏览器 history 中去，即Hash的改变不会引起界面的刷新，但是会触发onhashchange事件，我们要做的就是监听这个事件
以下是一个基础的SPA例子：
制作三个<div>，为了其配对一个id，并将 hash 地址与<div>建立链接关系，从而可以从 hash 变化值中操作界面。
<body>
<div id="A" class="a">A</div>
<div id="B" class="b" style="display:none;">B</div>
<div id="C" class="c" style="display:none;">C</div>
</body>监听onhashchange事件
function hashChanged(hashObj) {
//变化之后的url
var newhash = hashObj.newURL.split('#')[1];
//变化之前的url
var oldhash = hashObj.oldURL.split('#')[1];
//将对应的hash下界面显示和隐藏
document.getElementById(oldhash).style.display = 'none';
document.getElementById(newhash).style.display = 'block';
}
//监听路由变化
window.onhashchange = hashChanged;这样通过改变URL值，会发现页面也是在变化。
onhashchange事件接受一个hashObj，其属性有oldURL以及newURL
2.1.1 关于SEO优化
搜索引擎抓取页面首先要遵循http 协议，可是#不是协议内的内容。而实际上也是这样，我们没有见过搜索引擎的搜索结果中，哪一条记录可以快速定位到网页内的某个位置的。解决的方法是用 #! 号代替 # 号，因为谷歌会抓取带有 #! 的URL，这样我们也可以解决ajax的不被搜索引擎抓取的问题。在vue.js 里面，我们可以看到作者就是这样做的。
3 前端路由优缺点
优点：
- 从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升
- 在某些场合中，用
ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题
缺点：
- 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
