来源：coderwhy老师

后端渲染：

以前开发都是用jsp/php/asp开发的。浏览器中显示的页面都是从后端渲染完成后传过来的。

早期的网站开发整个HTML页面是由服务器来渲染的。
1. 服务器直接生产渲染好对应的HTML页面(比如在Servlet那个类中写入HTML代码)，返回给客户端进行展示。
但是，一个网站，这么多页面服务器如何处理呢？
1. 一个页面有自己对应的网址，也就是URL
2. URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个Controller进行处理
3. Controller进行各种处理，最终生成HTML或者数据，返回给前端
4. 这就完成了一个IO操作
上面的这种操作，就是后端路由
1. 当我们页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户端
2. 这种情况下渲染好的页面，不需要单独加载任何的js和css，可以直接交给浏览器展示，这样也有利于SEO的优化。
后端路由的缺点
1. 一种情况是整个页面的模块由后端人员来编写和维护的
2. 另一种情况是前端开发人员如果要开发页面，需要通过PHP和Java等语言来编写页面代码
3. 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起，编写和维护都是非常糟糕的事情。

什么是后端路由？
后端处理URL和页面之间的映射关系，这种映射关系是后端在保存的。

前端渲染：

在这里插入图片描述
后端只负责提供数据，不负责任何阶段的内容。

浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页。
在这里插入图片描述
很多公司不仅有网页端，也有多种App端，所以前端后必然要分离，后端只返回JSON数据（不使用模板引擎啥的），前端处理JSON数据，

如今的网络阶段，单页面富应用阶段

其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
也就是前端来维护一套路由规则

SPA页面：
Simple page web application
整个网页只有一个HTML页面，当我们在浏览器输入域名的时候，浏览器会一次性获得所有的html+css+js的全部资源，然后我们在点击特定的链接或者按钮的时候，前端路由会进行抽取对应的html+css+js，而这些抽取的内容，就是Vue中一个个的组件
在这里插入图片描述
前端路由就是用映射浏览器里面，上面箭头之间的映射关系是由前端路由管理的，后端已经不管HTML页面映射的问题了，它只负责提供json数据。
在前端中一个url对应一个组件，它们之间这种关系是由前端去维护的，故称前端路由。

前端路由的核心是什么呢？

改变URL，但是页面不进行整体刷新
如何实现呢？

我们不随便进行刷新，一刷新一定会向服务器请求资源。

不刷新而进行改变页面的方式

1. URL的hash:

在这里插入图片描述
注意：用hash改的URL都带有#号

2. HTML5的history模式：pushState

在这里插入图片描述

在控制台中通过location.href = ‘aaa’修改的话，整个页面会刷新；
如果使用location.hash = 'aaa'修改的话，页面就不会刷新。
使用history.pushState({}, ' ', '/foo') 也不会有任何刷新。
pushState参数类型：f(data, title, ?url)`
history.pushState()；使用的是栈结构，每次压入的url都处于栈顶。使用history.back()的话，就会将栈顶的url出栈，浏览器的url地址后退。