路由
我理解的路由，有一个url是xxx.com，访问
xxx.com
xxx.com/a
xxx.com/b
会对应有不同的界面。也就是根据不同的路径，我们得到了不同的结果。后端的web服务器如何实现这样的跳转，收到浏览器发出的响应后，对于不同的路径，web服务器返回不同的html等信息给浏览器。这就是路由的作用。
前端路由
前端路由，就是访问不同路径，由浏览器中的js根据/后不同的路径来控制页面的跳转，得到了不同的页面。这个过程由前端控制，不需后端web服务器处理。常见的实现比如Vue-router。开发单页面应用时，就会用到路由功能。
前端路由实现的原理
访问xxx.com/a， xxx.com/b时，正常状态下，页面会进行刷新，状态会发生改变。实现前端控制路由，有下面这些方法。
通过锚点
把xxx.com/a， xxx.com/b改为xxx.com/#a， xxx.com/#b，浏览器处理时，URL后的锚点信息是不会传给服务器的，因此后端不会有处理。
通过onhashchange API能监听URL的锚点变化，锚点变化时，通过js控制跳转到指定的页面。
通过window.history
history.pushState(state, title, url)
将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。也就是实现了访问xxx.com/a， xxx.com/b时，请求传给后端web服务器，但是并不刷新当前页面。后端的web服务器收到请求后，都返回了同样的结果，浏览器得到同一个html。
代码实现
Vue-router的例子
- 最基本的例子，https://jsfiddle.net/yyx990803/xgrjzsup/，这里的原理是通过hash锚点来实现。
- vue-router也支持使用history方式实现，文档里可以看（这种方式要对后端web服务器进行配置，确保不同路径请求返回相同页面，否则会404）
原生JS实现
直接控制display实现
http://js.jirengu.com/gohitupawu/1/
通过锚点
<style>
.content>div{
display: none;
}
.content>div.active{
display: block;
}
ol>li.active{
color: red;
}
</style>
<tab>
<ol class="nav">
<li><a href="#1">goToA</a></li>
<li><a href="#2">goToB</a></li>
</ol>
<ol class="content">
<div>this is A</div>
<div>this is B</div>
</ol>
</tab>
<script>
selectTab()
window.onhashchange = function(){
selectTab()
}
function selectTab(){
let n = location.hash.substring(1)
let index = n - 1
$('ol.content>div').eq(index)
.addClass('active')
.siblings()
.removeClass('active')
}
</script>
上述方式即是通过锚点，监听hash变化实现的前端路由。
history方式
代码略
