简单路由的实现

1.hash路由
原理：就是监听浏览器的hashchange事件，通过动态设置location.hash或者锚点的方式来改变hash值，让页面内的视图发生变化

    
    
    
    


	
Tab1
    Tab2
    

    

这样切换点击tab1和tab2，下面的routerview就会变化，导航栏的hash也会跟着变化
2.history模式
主要使用的history的pushState等方法

history.pushState/replaceState方法接受三个参数，依次为：
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

    
    
    
    


    
Tab1
    
Tab2
    

    

这里使用只是个简单的操作，实际实现中应该要观察url的动态变化，然后触发函数，可使用观察者模式实现（后续补充）
3.popstate当浏览器前进后退的时候触发，改变hash的时候都会触发

 window.onpopstate = function (event) {
     console.log('location: ' + document.location);
     console.log('state: ' + JSON.stringify(event.state));
 }
 // 或者
 window.addEventListener('popstate', function(event) {
     console.log('location: ' + document.location);
     console.log('state: ' + JSON.stringify(event.state));
 })

可在浏览器后退时监听做一些操作，注意：pushState/replaceState不会触发popState函数