74. 前端路由

1. 浏览器发送请求的流程

1. 浏览器发出请求；
2. 服务器监听到80端口（或443）有请求过来，解析url路径；
3. 根据服务器的路由配置，返回对应的数据；
4. 浏览器根据 Content-type 的类型来解析数据，并渲染在页面上；

 在多页面的应用中，在浏览器中切换不同的路径会发送不同的请求并匹配到后端路径上；但是在单页面应用（SPA）应用大范围流行的时候，ajax流行，异步数据请求交互发生在不刷新浏览器的情况下运行，由此推出了前端路由的概念；

2. 前端路由的原理

匹配不同的url路径进行解析，然后动态的渲染出不同的内容，但是当url变化的时候不刷新界面；

hash

14年之前，使用hash的方式
http://www.xxx.com/#/login    
# 后面的内容发生变化的时候，不会导致浏览器向服务器请求，hash改变会触发 hashChange，然后监听 hashChange 更新页面内容；

history

14年后，HTML5标准发布，多了两个API：pushState，replaceState，通过这两个API可以改变url地址但是浏览器不会重新发送请求，这种方式浏览器地址的url中不会带有 # 号，但是当用户重新刷新的时候会发送请求，所以需要服务器的支持，把所有的路由都重新定向到根页面；

3. 前端路由在vue中的使用

vue-router
需要注意的时候，在使用history模式的路由时，路由的/路由都会被解析成根路径，会导致出现404的错误，解决办法如下：

// 生产环境下使用相对路径，就是把路由中配置的路径拼接到前面的base路径后面
vue.config.js
module.exports = {
  // 基本路径 /pd_tools/ /study_map_tool/
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
}