前端路由和后端路由

路由就是一个匹配过程，将url映射到相应的函数里，这个函数可以是前端的函数，也可以是后端的函数，然后由这个函数决定返回给这个url什么东西。

渲染：生成HTML文档的过程。一般页面中的数据会时常发生变化，不可能为每一组数据写一个视图，所以我们要分离视图和数据，然后通过渲染将数据塞到视图中。

后端路由

在web开发的早期，一直是后端路由占主导地位。后端服务器都会专门开辟出一个路由模块，用来专门匹配url地址，表单提交以及ajax请求的地址，如果没有找到就会返回404错误。

一般我们在地址栏中输入一个url，按下enter键之后都是通过get请求发送到服务器。

这也体现了url地址和请求方法（get，post，put，delet）是一一对应的，如果服务器路由中只有post方法，那么浏览器发出get请求会返回404。

服务器渲染

路线：请求一个HTML；服务器请求数据（内网请求快）；服务器渲染视图，并返回已有的页面；浏览器请求JS/CSS；等待JS下载完成；等待JS加载并初始化完成；浏览器将剩下一部分渲染完成。

早期时候网页通常都是通过后端路由直出给浏览器，也就是说网页的HTML在服务器通过后台语言对应的模板引擎渲染好了之后再交给前端，这就是服务器渲染。

服务器渲染的优点，如对SEO友好，在后端渲染的安全性也高。

缺点：服务器压力很大；前后端分工不明确，耦合性太强，页面不好维护。

前端路由

页面跳转的url由前端匹配，url改变时不会重新加载页面，也就是不会像服务器重新请求资源。

前端路由主要有两种方式

• 带有hash的前端路由，优点是兼容性高，缺点是带#不好看
• 不带hash的前端路由，优点是不带#好看，缺点是需要服务器支持

前端路由在SPA的web项目中应用很广泛。前端路由最明显的好处是页面跳转不会白屏，即页面切换快。

当再地址栏输入url点击enter键时要去服务器请求的，但是在浏览器中点击前进后退，或者利用vue-router来切换页面都是属于前端的路由，不会向服务器请求。

hash模式：浏览器在解析url时，#后面的路径发生变化，不会向服务器重新请求资源，只会触发hashChange事件。hash模式就是利用这一点来实现前端路由。前端的router库会捕捉#后面的参数来切换到对应的页面。服务器只会返回#之前url对应的html，具体显示哪个页面由前端路由去匹配。

history模式：router库通过HTML提供的history的两个API来实现，history.pushState（）和history.replaceState（）。这两个API操作浏览器历史记录，不会向服务器发起请求。前者增加一条历史记录，后者直接替换掉当前的url。

前端渲染

路线：请求HTML；服务器返回HTML；浏览器下载HTML中的JS/css内容；等待JS下载完成；等待JS加载完成并初始化；通过JS向服务器请求数据（ajax）；后端返回请求的数据；浏览器从无到有，完整地渲染出响应式页面。

前端渲染是通过JS渲染页面，JS动态地删除旧组件渲染出新组件。但是缺点是对SEO非常不友好，因为搜索引擎的爬虫只能识别HTML，对JS内容不能识别。

前后端分工很明确，后端提供数据，前端负责渲染和交互逻辑。

基于前端库的服务端渲染

为了改善前端渲染的SEO问题，后来又提出了基于前端库的服务端渲染，跟以前基于后端语言的服务端渲染不同，它采用的依然是前端的路由，并且引入了状态同一、vnode等概念，对服务器的性能要求也高很多。