1. 单页面应用SPA、多页面应用MPA
多页面应用：每个页面都有自己的 html 文档，每个页面会重复加载 js、css等资源。页面跳转时需要刷新整个页面的资源。
单页面应用：只有一个 html 文档作为主页面，一开始就会加载所有需要的资源（html/css/js）。页面跳转时会切换相关组件，仅刷新局部资源。
两者的区别、优缺点：
- SEO：SPA不利于SEO（可以借助SSR优化读取DOM结构）；MPA SEO效果好。
- 用户体验：SPA页面切换速度快、体验好；MPA 页面切换速度较慢。（因为文件都已经提前加载完）
- 首屏时间：SPA首屏加载速度较慢。
- 路由模式：SPA可以使用
hash和history；MPA 使用普通链接跳转。 - 使用场景：SPA 适合手机App这种对切换体验要求高的应用；MPA 适合官网、电商网站这些追求首屏渲染速度的应用。
2. hash 模式
hash 模式是把前端路由的路径用#拼接在真实 url 后面。当 hash 值（#后面的路径）改变时会触发hashchange事件实现路由跳转（浏览器不会重新发起请求，会把当前hash地址对应的组件渲染到页面）。
补充：
- hash 值只是客户端的一种状态，当向服务端发请求时不会被提交。
- hash 值的改变都会在浏览器的访问历史中增加一条记录，所以我们可以通过回退、前进按钮来切换 hash。
- hash 只能修改
#后面的部分，所以只能跳转到与当前 url 同文档的 url。
3. history 模式
history 模式是通过 h5 的 history（浏览器的浏览历史）对象的 pushState和replaceState方法实现的。这两个 API 可以在不刷新页面的情况下操作 history 对象，前者是新增一个历史记录(url)，后者是替换当前的历史记录（url）。然后使用window.popstate事件监听 url 的变化。
注意调用pushState、replacestate不会触发该事件。
4. 两者区别
都是无刷新跳转。
- 美观：hash 有
#、不美观，history 没有。 - 兼容性：hash 兼容性好，>=IE8。
- 服务端：hash不需要服务端做改动；history 需要服务端对前端路由进行支持配合。
history 需要服务端支持？
浏览器刷新时会按照路由去发送真实的资源请求。如果这个路由是通过 history 模式设置的，那么在服务端往往不存在相关的资源，就会返回 404。所以需要服务端配合前端路由，一般将不存在资源的页面重定向到首页。
5. 项目实践
- React-Router-Dom
import { Switch, Route, Router } from 'react-router';
import { Swtich, Route, BrowserRouter, HashRouter, Link } from 'react-router-dom';
react-router-dom在react-router的基础上扩展了一些有关dom操作进行路由跳转的api：BrowserRouter、Link。项目使用的是react-router-dom v5。
- createHashRouter：hash 模式。
- createBrowserRouter：history 模式。
- Vue-Router
- createWebHashHistory：hash 模式。
- createWebHistory：history 模式。
