MPA（Multi-Page Application）和SPA（Single-Page Application）：
多页应用：是由多个HTML页面组成的网站，每导航到一个新的页面，浏览器都会从服务器中请求一个新的HTML页面。
单页应用：是由单个js应用程序组成的网站。SPA 的独特之处在于它们能够在浏览器中将您的网站作为 JavaScript 应用程序运行，以便在您导航时呈现新的 HTML 页面。
多页应用和单页应用的差别： 多页应用的渲染永远比单页应用要快，因为SPA 需要在浏览器中下载、解析和运行整个 JavaScript 应用程序，才能在页面上呈现任何 HTML。
react和vue框架都是单页应用
单页面应用都会有路由配置表，不同的页面展示实际上是根据路由切换从而加载渲染不同的组件。并没有重新请求新页面。所以，当修改数据时，只是页面的对应组件进行重新渲染更新，并没有重新请求新的页面。
什么时候使用多页面应用？
一般情况下，公司官网会使用多页面应用，使用多页面应用的好处是有利于SEO。缺点是，所有的页面都是静态页面，所谓的通过传入参数实现跳转到某详情页面，事实上也是获取提前在服务器端生成好的html页面中的指定页面。
以astro为例，在astro中，路由是自动生成的。
src/pages目录下的每个astro和md文件，其文件路径都会自动成为网站的页面或端点。 带参跳转需要明确带过来的参数是什么，如果不能确定参数具体内容，也可以写成动态参数，但所有的动态参数在打包编译后都会变成一个个具体的html并有固定的url。如果跳转时没有查找到对应url。则无法返回正确的html，从而导致404。
目录结构：
│ └── pages/
│ │ ├── news/
│ │ │ ├── [page].astro
│ │ │ ├── [...date].astro // 无论参数长度如何都能产生对应的页面
│ │ │ ├── [animal]
│ │ │ │ └── [type].astro // 只对应一个动态参数
│ │ └── index.astro
以下是结果：
# 当前页面：index.astro页面
<a href="/news/01">跳转到news的page页面</a> // 可以找到
<a href="/news/2022/01/01">跳转到news的date页面</a> // 可以找到
<a href="/news/dog/bage">跳转到dog的bage页面</a> // 可以找到
<a href="/news/dog/bage/02">跳转到dog的bage的02页面</a> // 404，因为动态参数只有一级
踩坑：
MPA项目是否可以在一个页面内嵌入组件，通过传参的方式，使得组件的数据随入参的不同而切换？
如果参数都在该页面内，并且是提前定义好的常量，可以通过在页面内切换参数实现组件更新不同内容。 但如果参数是通过其他页面传入，会出现切换参数时，页面闪烁跳转。究其原因，就是因为这时并不是修改了组件的数据，导致页面更新。而是在刚开始生成页面时，已经根据传入的参数分别生成了多个页面，每次“刷新组件”时，都是重新发起请求，返回新的页面。
