spa（单页）应用
本质就是根据url变化动态切换组件展示

有hash和histrory 模式
url组成部分中 '#' 号 开始的内容称为hash值，以前是用来做页面滚动锚点的
浏览器提供了 window.history的 replaceState/pushState 2个函数，可以做到改动url 而浏览器不刷新

hash的兼容性较好，histroy在某些安卓低版本上不能用，像vue-router就会回退到hash模式
而此时路由会展示默认页面 就是 path: / 对应的页面，那么可以在默认页面中判断$router.mode === $router.option.mode 来确定是否是回退hash了,回退了用$router.replace切一次即可

原理：跑正则匹配配置的url确定要展示的组件
监控url变化事件:
history 根据window的popstate事件
hash 模式根据window的 hashchange/popstate 事件

好处看和谁比：
和iframe比就是加载资源少，白屏时间短，状态共享无障碍
坏处很明显，项目大了不好切成小项目维护，所以现在微前端方案层出不穷

前端路由在我看来就是url的变化
它的好处是可以做spa吧，不像传统的多页面应用一样由后端控制路由变化来显示不同的html，不用频繁的跳转
本质上就是检测 url 的变化，截获 url 地址，然后解析来匹配路由规则。
实现方式的话大概可以分为两种，一种是history，另一种是hash

history

history是将a标签中的默认跳转替换为ajax请求，然后通过history.pushState来改变路由（ajax可以实现页面不刷新的）
浏览器的前进与后退，会触发window.onpopstate事件，通过绑定popstate事件，就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入，实现Ajax的前进与后退效果。
页面首次载入的时候，如果没有查询地址、或查询地址不匹配，则使用第一个菜单的Ajax地址的查询内容，并使用history.replaceState更改当前的浏览器历史，然后触发Ajax操作。

hash

Web 服务并不会解析 hash，也就是说#后的内容Web服务都会自动忽略，但是JavaScript是可以通过 window.location.hash 读取到的，读取到路径加以解析之后就可以响应不同路径的逻辑处理。
hashchange 事件(监听 hash 变化触发的事件)，当用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。

前端路由指的是什么？

• 前端路由一般用在单页应用(SPA),是利用地址栏URL的变化，动态的替换页面中的DOM

它有什么好处？

• 后端路由需要刷新页面，SPA模式下的前端路由不需要刷新页面
• 除了Ajax外，完全的本地加载，提高响应速度
• 前后端代码更好的解耦

它有哪些方式可以实现呢？

• hash
  • 利用url HASH值的变化，监听hashchange事件，来替换DOM节点
  • 支持老旧的IE浏览器
• History API
  • 监听popstate事件，利用pushStateAPI，同时进行DOM替换，实现前端路由
  • 需要服务器的特殊配置(一般配置除了接口之外的get请求都指向index.html),不然会请求到服务器定向的资源