H5 路由的两种实现

1、原理浅析

• hash模式
  如果a标签的href属性以"#"开头，那么当点击这个a标签时就会触发hashchange事件，在该事件处理函数中可以做很多事，比如发ajax请求，进行DOM操作替换页面等。
• history模式
  hisroty模式相比hash模式，是一种比较新的路由模式，其浏览器兼容性如下：

pushState浏览器兼容性

原理就是利用history.pushState(state,null,url)更新浏览器url地址

2、具体实现

Talk is easy，show you the Code!

    
    


    #1
    #2
    

    
    
    

3、需要注意的地方

• pushState的第三个参数url是不能跨域的
• pushState并不能触发popstate事件，只有浏览器的前进返回才能触发popstate

• history 模式刷新页面无效问题(webpack设置 publicPath 必须为绝对路径才行)

location /{
    index  index.html index.htm;
    if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;
        break;
    }
}

参考：单页面应用路由实现原理：以 React-Router 为例