1.多页面应用与单页面应用

多页面应用（Multi-Page Application, MPA）

• 用户一般切换不同的tab或者提交表单时，服务器都会返回一个新的html文件，浏览器每次都会重新刷新页面，因此性能相对较差。

• 一般来说，前端只需要搭建好html+css样式的模版文件，由后端填充数据，因此不太需要前端路由，这也意味着这种方式更方便SEO

单页面应用：

• 浏览器在访问一个单页面应用时，只会在最开始时，请求一次资源文件，其他的操作，都是由 Ajax + js 进行局部动态切换和渲染，因此性能相对比较好。
• 由于是单页面，所以需要前端路由来进行不同的“页面”切换，这就需要引入前端路由这个概念了

  • 前端路由目前由两种模式：hash 、history

这里使用express简单的模拟一个单页面应用和多页面应用

const express = require("express");
const { join } = require("path");
const app = express();
const port = 3000;

// 配置静态资源路径
app.use(express.static(join(__dirname, "/public")));

/** ----------------- start 以下为多页面路由配置 **/
// 根据URL的不同，返回对应的HTML
app.get("/", (req, res) => {
  // 返回 index.html 文件  
  res.sendFile(join(__dirname, "/public/index.html"));
});
app.get("/list", (req, res) => {
  // 返回 list.html 文件 
  res.sendFile(join(__dirname, "/public/list.html"));
});
/** ----------------- end **/

/** ----------------- start 以下为单页面路由配置 **/
// 无论URL是什么，都返回index.html
app.get((req, res) => {
  // 返回 index.html 文件  
  res.sendFile(join(__dirname, "/public/index.html"));
});
/** ----------------- end **/


app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

聊一聊SPA 前端路由的两种模式hash模式和history模式

hash模式：

当在浏览器访问ttp://localhost:3000/#/list 、http://localhost:3000/#/home 等具有 # 的URL时,浏览器其实向服务发生的GET请求的资源一直都是 http://localhost:3000/,也就是服务器返回的一直都是同一个HTML文件

特点：

• URL 中含有 # , hash值为 #/list 、 #/home
• 当页面的hash值变化时，不会向服务器发送请求，会触发hashchange事件，前端请求数据，通过js渲染不同的页面
• 优点在于兼容性好，不需要后端支持。缺点是地址栏中带有 #

history模式

特点：

• H5 新特性，运行前端直接修改URL，而不重新发起资源请求

• history模式是通过构建一个历史栈来进行管理，通过API,replaceState、pushState 、forward、 go、back来修改

• popstate事件可以监听到URL变化

  • popstate 可以监听到back、forward 和 go 方法

  • popstate 监听不到 replaceState、pushState

• 需要后端配置.

  • 为什么需要后端配置能呢？因为如果不配置的话，直接访问 http://localhost:3000/#/home,会优先去找 home.html,会出现404