[JavaScript知识库]前端路由 与 后端路由

欢迎学习交流！！！
持续更新中…

路由：路由是根据不同的 url 地址展示不同的内容或页面，是指分组从源到目的地时，决定端到端路径的网络范围的进程。


路由工作包含两个基本的动作：
1、确定最佳路径
2、通过网络传输信息
在路由的过程中，后者也称为后者也称为（数据）交换。交换相对来说比较简单，而选择路径很复杂。

前端路由

前端路由的核心是：改变URL，但是页面不进行整体的刷新。根据不同的hash地址，展示不同前端组件

很重要的一点是页面不刷新，前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，每跳转到不同的URL都是使用前端的锚点路由. 随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。

用途：
主要用于单页面应用程序

后端路由

浏览器在地址栏中切换不同的 url 时，每次都向后台服务器发出请求，服务器响应请求，服务器渲染好整个页面, 并且将页面返回给客户端。

后端路由其实就是一个web服务器。通过用户请求的url导航到具体的html页面；每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML，也可以是直接返回模板HTML，然后由前端js再去请求数据，使用前端模板和数据进行组合，生成想要的HTML。

这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化。

后端路由的精髓在于，通过后端路由能找到对应的服务。而且后端路由管的事情，不仅仅在于页面跳转（虽然前端页面跳转可以用后端路由来实现），后端路由的别名也叫做“接口” 。后端路由其实就是一个个服务所在的接口，ajax发请求的目的地。

二者比较

前端路由

优点：

1. 用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，快速展现给用户
2. 实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。

缺点：

1. 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
2. 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

后端路由

优点：

分担了前端的压力，html和数据的拼接都是由服务器完成。

缺点：

1. 当项目十分庞大时，加大了服务器端的压力。
2. 同时在浏览器端不能输入制定的url路径进行指定模块的访问。
3. 如果当前网速过慢，那将会延迟页面的加载，对用户体验不是很友好。

前端路由的两种模式

vue-router 中有hash模式和history模式。
在vue的路由配置中有mode选项，最直观的区别就是在url中hash 带了一个 # ，而history是没有#的，vue默认使用hash。

hash

即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。

比如这个 URL：http://www.baidu.com/#/home，hash 的值为 #/home。

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

histroy

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（需要特定浏览器支持），用来完成 URL 跳转而无须重新加载页面，不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，就需要配置404页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

二者比较

• hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有带#，外观上比hash 模式好看些
• hash 能兼容到IE8， history 只能兼容到 IE10
• 由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。
• hash原理：hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则
• history原理： 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化