前端路由分类及原理现在搞前端的应该没人不知道啥是SPA，啥是SSR了吧。SPA就是所谓的单页面应用，即路由跳转时不刷新页

前端路由分类及原理

前言

现在搞前端的应该没人不知道啥是SPA，啥是SSR了吧。SPA就是所谓的单页面应用，即路由跳转时不刷新页面；SSR是很早就有的东西了，比如jsp、asp，即服务端渲染，给到浏览器的是已经渲染好的html文件了，切换路由的时候也会刷新页面。到底应该用哪个取决于团队需求，基本上除了重SEO的情况，前端都会采用SPA了。随着SEO的重要性逐渐下降(互联网入口越来越多不止百度一家独占)，加上现在流行前后端分离、微服务等原因，SPA是绝大部分前端的选择了，所以重学前端开篇，采用前端路由作为选题，接下来给大家聊聊SPA原理。
分类
1. 浏览器支持的两种前端路由方式分别是hash、history。通俗的讲带#的就是hash路由。
2. 优缺点对比：
  1. hash
    1. 优点：兼容性好，不许要服务端支持
    2. 缺点：带#，不符合人类审美，会被一些有洁癖的甲方爸爸diss
  2. history
    1. 优点：符合人类审美
    2. 缺点：开发成本，需要服务端支持。有些前端不太了解nginx配置或者SpringMVC路由的写法，后端不支持的话只能自己搞，不过这是个一劳永逸的工作。
3. 原理（重点介绍）
  1. hash路由
    1. 当url的hash改变时，即浏览器的地址栏#后面的内容改变时，页面不会刷新，浏览器不会像后端发送页面请求。前端要做的就是改变hash和监听hashchange事件。
    2. 更改hash的代码：
      
      window.location.hash = '#a'
      
      window.location.replace('#b')
      
      上面两行代码可以随便在哪个网站打开控制台试一下。
    3. 监听hashchange代码：
      
      window.addEventListener('hashchange', () => document.getElementById('root').innerHTML = 'hash has change')
  2. history路由
    1. HTML5 规范中提供了 history.pushState 和 history.replaceState 来进行路由控制。通过这两个方法，可以实现改变 url 且不向服务器发送请求。
    2. 更改history的代码：
      
      history.pushState({}, '', '/a')
      
      history.replaceState({}, '', '/b')
      
      上面两行代码可以随便在哪个网站打开控制台试一下。
    3. 监听history change：
      
      这个有点麻烦，不像hash一样有一个现成的hashchange方法。考虑到更改history只有两种方式：浏览器的前进后退、通过上面两行代码触发，所以可以对这两种方式进行回调处理：
      1. 浏览器的后退/前进：触发popstate事件
        
        window.addEventListener('popstate', handleHref);
      2. history.pushState/history.replaceState：同步事件，直接把popstate的回调函数写在后面就可以。
        
        history.pushState({}, '', '/a');
        
        handleHref();
      3. 回调函数：
        
        function handleHref () {document.getElementById('app').innerHTML = 'history has change' }