前端路由和后端路由

​ 在学习vue-router过程中产生了一个疑问，前端路由和后端路由的定义和区别是什么？ 在本篇笔记中将我对前端路由和后端路由的理解进行一个记录，并简单介绍一下vue-router的默认模式——hash路由模式。

1. 前端路由

​ 随着各种MVVM框架的兴起，前端逐渐SPA（单页面应用）化了，这导致前端层面不像过去需要编写多个页面，然后根据后台返回进行跳转，而是变成了组件化，进入不同页面就是切换不同的组件，无需进行http请求，节省了数据交换的时间，其实前端路由的目的就是完成组件切换而不需要向后端发起请求。可以这么理解，前端路由将url映射成了组件。

优点：用户体验好、切换跳转快

缺点：前进后退会重新发送请求，没有合理利用缓存资源。

2. 后端路由

​ 后端路由也可以称为服务端路由，可以这么理解，后端路由将url映射成了对应函数，如果是静态资源的获取，那么这个函数就是一个文件读取操作，如果是较为复杂的动态资源的获取，那么这个函数就是一个链接数据库，增删改查数据并进行处理的数据操作。

优点：安全性好、利于seo

缺点：加大服务器压力，对用户体验不好，代码耦合大

3. hash路由模式

​ vue-router有两种路由模式，一种是默认的hash路由模式，一种是history路由模式。在这里我主要说hash路由模式。

​ hash模式是如何做到不发起后端请求更新内容的呢？

• 首先hash模式的url是以#符号进行开头的，这个符号在url中是用来做定位使用的，是浏览器的操作，所以当url加上#号之后，该符号后面的参数都不会传入后端。
• 单单修改#后面的路径不会导致网页重载，这就符合前端路由不发送后端请求的特点。
• 可以通过监听onhashchange事件获取到hash的改变，在这个事件中根据参数改变要展示的内容，即完成组件的切换，vue-router的hash模式想必也是基于这个原理进行的组件切换。
• location.hash也可以读取#值，读取时可以用来判断网页状态是否改变，写入时则在不重载网页的前提下，创造一条访问历史记录。
• hash模式同样支持浏览器的前进后退操作，因为当hash模式的url改变后，这个url会存入浏览器的历史记录，所以可以通过浏览器完成前进后退。但是前进后退似乎会重新发起http请求，没有依赖前端缓存。不知道vue-router有没有解决这个问题。

4. 后续计划

​ 在后续文章中会实现使用hash模式进行简单的前端路由实现，也会继续了解history模式下的前端路由。