前端的路由控制

最近spa很流行，其实所谓spa就是服务端提供数据，前端js进行渲染改变容器里的内容，新手初探。这里就涉及到路由控制，目前路由控制有两种：

路由控制

1. hash的路由

也就是类似angular和vue目前实现的路由，总会在path后面加上#!这些，个人觉得不是很美观，当然兼容性没得说，ie6也是支持的。

2. history的路由

history是html5新添加的api，这边不多说了，反正网上一大堆介绍，history的路由优势在于美观（个人感觉），缺点也就是兼容问题了,如图：

路由实现

先看个简单的演示吧

可以看到内容是随着路由的改变而改变的，这里没有用ajax，就是简单的替换内容，不过意思是一样的。那么代码是怎么样的呢

var els=document.querySelectorAll('.el');
//添加事件
window.addEventListener('click',function(e){
  if(e.target.className==='el'){
    console.log(history.state)
    if(location.pathname.slice('1')===e.target.innerText){
      history.replaceState(null,'el',e.target.innerText)
    }else {
      history.pushState(null,'el',e.target.innerText)
    }

    document.querySelector('#app-container').innerHTML=e.target.innerText
  }
})
//触发回退前进事件
window.addEventListener('popstate',function(e){
  document.querySelector('#app-container').innerHTML=location.pathname.slice(1)
})

就是这么简单的一个例子。我也是刚摸清楚，过段时间继续更新。