路由 （hash模式和history模式）

首先我们了解一下资源请求：

1.什么是资源

在浏览器需要某一个数据或文件进行解析或者浏览器在解析某个脚本的时候需要数据进行DOM渲染等工作，那么这个数据或文件就是浏览器的资源

2.资源怎么获取

浏览器的资源都必须通过资源请求的方式或从缓存中调出的方式进行获取

3.资源请求的过程是什么

1. 浏览器HTTP的三次握手
2. 在第三次握手的同时进行通信
3. 通信就是向某个主机请求资源
   1. 本地的计算机（文件系统）
   2. 本地或远程的服务器（文件系统）
4. 资源从对象主机响应回客户端（浏览器）
5. 浏览器对资源进行加载解析

网络请求：
前提：
1. 一定要有一个服务器
2. 文件一定是保存在服务器文件系统的
服务器程序（HTTP服务）

4.下面是我们写的一个服务器文件，通过浏览器可以请求该服务器资源

const express = require('express');
const {
   
   resolve} = require('path');

const app = express();

// 服务器 如果你想通过 http://localhost:8080/home.html
// app.use(express.static(resolve(__dirname, 'public')));

// GET  http://localhost:8080/data => {}
// 
app.get('/data', (req, res) => {
   
   
  // application/json
  res.json({
   
   
    name: 'hello lucky',
    age: 18
  })
})

app.get('/', (req, res) => {
   
   
  // 响应回home.html
  // res.sendFile()
  res.sendFile(resolve(__dirname, 'public/home.html'));
});

app.get('/list', (req, res) => {
   
   
  // 响应回list.html
  res.sendFile(resolve(__dirname, 'public/list.html'));
})

app.listen(8080, () => {
   
   
  console.log('Server is running on PORT 8080');
})

资源目录 home和list资源存放在public文件夹下（普通的html文件）

以上就是浏览器通过地址访问服务器资源的过程，下面我们继续说下什么是单页面应用，什么是多页面应用

单页面应用/多页面应用

1.单页面应用（spa）

指只有一个页面的web应用，进入页面只需要加载一次相关资源（css、js等），所有内容都包含在此页面中，对每一个功能内容做组件化。单页面应用跳转，就是切换相关组件，仅仅只是刷新局部资源。

2.多页面应用（mpa）

指有多个独立页面的web应用，且进入每个页面都必须重复加载相关资源（js、css等）。多页面应用的跳转，需要整页资源刷新。

3.单页面应用和多页面应用区别?

1. 页面数量和跳转方式不同。单页面应用通常只有一个主页