hash模式:

  1. 原理: 在 url 中的 # 之后对应的是 hash 值, 其原理是通过window.onhashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件
  2. 优点:
    (1) 只需要前端配置路由表, 不需要后端的参与
    (2) 兼容性好, 浏览器都能支持
    (3) hash值改变不会向后端发送请求, 完全属于前端路由
  3. 缺点:
    (1) hash值前面需要加#, 不符合url规范,也不美观

history模式:

  1. 原理: 利用H5新增的history.pushState()和window.onpopstate()以及history.replaceState()方法监听和改变url
  2. 优点:
    (1) 符合url地址规范, 不需要#, 使用起来比较美观
  3. 缺点:
    (1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误
    (2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持