路由Hash与History

1.url不同

Hash ：Hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。

History：如果用户考虑url的规范那么就需要使用History模式，因为history模式没有#号，是个正常的url适合推广宣传。当然其功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式。

2.http请求

Hash ：仅 # 之前的内容包含在 http 请求中，后面部分虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

History：将url替换并且不刷新页面，http并没有去请求服务器该路径下的资源

3.History出现404

history 在刷新页面时，如果服务器中没有相应的响应或资源，就会出现404。（比如在访问二级页面的时候，做刷新操作）

hash 模式下，仅 # 之前的内容包含在 http 请求中，对后端来说，即使没有对路由做到全面覆盖，也不会报 404。

解决方案：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。（后端人员配置一下apache或是nginx的url重定向，重定向到前端首页路由上）。开发时用hash模式，build时用history。

4.实现原理

History：利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。
Hash：原理是 onhashchange 事件，可以在 window 对象上监听这个事件。

/*历史模式*/
<a class="api a">a.html</a>
<a class="api b">b.html</a>
  <script type="text/javascript">
    //注册路由
    document.querySelectorAll('.api').forEach(item => {
      item.addEventListener('click', e => {
        //阻止默认事件
        e.preventDefault();
        //当前链接
        let link = item.textContent;
        //创建一个历史记录,注册一个路由
        window.history.pushState({ name: 'api' }, link, link);
      }, false);
    });
    //监听路由，前进后退的时候触发
    window.addEventListener('popstate', e => {
      console.log({
        location: location.href,
        state: e.state
      });
    }, false)
  </script>
  
/*哈希模式*/
  <a class="hash a">#a.html</a>
  <a class="hash b">#b.html</a>
  <script type="text/javascript">
    //注册路由
    document.querySelectorAll('.hash').forEach(item => {
      item.addEventListener('click', e => {
        //阻止默认事件
        e.preventDefault();
        //当前链接
        let link = item.textContent;
        location.hash = link;
      }, false);
    });

    //监听路由，用hashchange事件
    window.addEventListener('hashchange', e => {
      console.log({
        location: location.href,
        hash: location.hash
      });
    }, false)
  </script>