前端路由你知道多少

hash模式实现

传统的超链接会打开一个新的页面，重度依赖于http协议,当只有后端路由时重新生成html网页 新的页面会有新的dom渲染的过程，会比较慢，会出现白屏的一下。影响体验

  hello hash
    hi hash

前端路由实现基于一个api history
当把超链接的地址写成如下时 带#

hello hash
    hi hash

获取页面的hashtag代码如下

 window.addEventListener('hashchange',e=>{
            var hastag=window.location.hash.substring(1);//
            console.log(window.location);
            console.log(hastag);
});

获取的数据如下，hashtag 当 点击超链接时，当点击不同的超链接时 仅仅是hashtag发生的变化 页面并没有刷新。而这时候控制页面不同部分的显示，似乎实现了前端路由的效果哦
所有 hashtag的意义就是 ：不会产生页面的跳转，捕捉到事件，马上切出对应的组件。

image.png

更成熟的前端路由，既可以hash 亦可以path切换。

history.pushState和history.replaceState
两个神器的作用就是可以将url替换并且不刷新页面，好比挂羊头卖狗肉，http并没有去请求服务器该路径下的资源，一旦刷新就会暴露这个实际不存在的“羊头”，显示404。
两个API都接收三个参数：

状态对象（state object）：一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

标题（title）：FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。

地址（URL）： 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

相同之处是两个API都会操作浏览器的历史记录，而不会引起页面的刷新。

不同之处在于pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。
演示代码如下

    
    
    
    
    
    


    
    

        

            

                
首页
                
新闻
                
关于
            
        
        


        
    
   

    

笔记参考 html5 hiistory 模式