前端路由和后端路由

路由

根据不同的url地址，展示不同的内容或页面。

前端路由

定义：在单页面应用，大部分页面结构不变，只改变部分内容的使用。
优点：页面不刷新，不需要每次都从服务器全部获取，快速展现给用户，用户体验好。
缺点：

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

后端路由

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

对比

1. 性能和用户体验：后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器响应请求，这个过程有延时。而前端路由在访问一个新页面的时候仅仅是变换了一下路径，没有网络延迟，提升用户体验。
2. 用ajax请求，可以让页面无刷新，页面变了但URL没有变化，用户就不能复制到想要的地址，用前端路由做单页面应用解决该问题。但前端路由使用浏览器的前进，后退键的时候会重新发送请求，没有合理利用缓存。

vue-router前端路由原理

前端路由主要模式（实现方法）：hash模式和history模式
目前前端路由的实现方法主要有两种，咯擦体哦你。hash和window.history。

1. 通过location.hash实现前端路由
   定义:hash是url中#后面的部分，也叫做url的锚部分，本身用来做页面定位的，它可以使对应id的元素显示在可视区域内。
   由于hash值的变化不会导致浏览器向服务器发起取嗯求，而且hash改变会触发haschange事件，该事件可以实时监听url中hash值的变化，由此来根据hash值的变化进行Dom的切换操作，浏览器的前进后退也能对其进行控制。

onhashchange的语法如下：       
 HTML中：           
 <element onhashchange="myScript">        
Javascipt中：            
object.onhashchange=function(){myScript};        
Javascript中，使用addEventListener()方法：            object.addEventListener("hashchange", myScript);       
 onhashchange事件有如下几种触发条件：           
 a)改变url地址，在最后面增加或改变其hash值；        
 b)改变location.href或location.hash的值；        
c)点击带有锚点的链接；  
 d)浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。

利用Hash实现前端路由： 设计思路：当浏览器地址栏url的hash值发生变化时，就会触发onhashchange事件，这时通过window.location.hash可以拿到当前浏览器的url的hash值，注意此时的hash值是带有#的，因此需要对其值进行相应的处理，去掉#，并且如果当前url不含hash值的话，就将其当做根目录处理。之后将url和相应的组件函数进行映射，根据不同的hash值执行不同的回调函数，也就是加载相应的组件。

2. 通过window.history和popstate实现前端路由

hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

浏览器窗口为用户提供一个history对象，用来保存用户操作页面的历史，我们在浏览网页时的前进后退操作都是基于这个对象来实现的。用到的接口history.pushState()和history.replaceState()

pushState()和replaceState()方法很类似，二者均接受三个参数，分别是state、title和url。其中state用来存放将要插入的history实体的相关信息，它是一个json格式的参数；title就是传入history实体的标题，需要注意的是firefox现在会自动忽略掉这个参数；url用来传递新的history实体的相对路径，如果其值为null则表示当前要插入的history实体与前一个实体一致，没有改变。replaceState()方法与pushState()方法的唯一区别在于，replaceState()方法会将最新一条的history实体覆盖掉，而不是直接添加，这种情况在处理例如登录页面这些不需要记录到history中的情况时非常有用。

这里需要注意的是history提供的这两个方法不会主动触发浏览器页面的刷新，只是history对象包括地址栏的内容会发生改变，当出发前进后退等history事件时才会进行相应的响应。另外，作为参数传入的url也会受到同源策略的限制，如果出现跨域等情况会导致报错。 popstate是官方提供的事件，当history中的记录发生改变时就会触发该事件。利用history实现前端路由： 设计思路：当想要跳转到指定url的时候，将目标url通过pushState()或者replaceState()方法填入到history和地址栏中，此时由于上述两种方法不会主动进行页面刷新，因此页面仍停留在当前页面，只是url地址发生了改变。之后通过popstate事件响应，执行相应的回调函数，实现前端组件间的切换。

https://www.jianshu.com/p/5231e7e125da

前端渲染和后端渲染

1. 前端渲染：指得是后端返回JSON数据，前端利用预先写的html模板，循环读取JSON数据，拼接字符串（es6模板字符串），并插入页面。

好处：网络传输数据量小。不占用服务端运算资源（解析模板），模板在前端（很有可能仅部分在前端），改结构变交互都前端自己来了，改完自己调就行。

坏处：前端耗时较多，对前端工作人员水平要求相对较高。前端代码较多，因为部分以前在后台处理的交互逻辑交给了前端处理。占用少部分客户端运算资源用于解析模板。

2. 后端渲染：前端请求，后端用后台模板引擎直接生成html，前端接受到数据之后，直接插入页面。

好处：前端耗时少，即减少了首屏时间，模板统一在后端。前端（相对）省事，不占用客户端运算资源（解析模板）

坏处：占用服务器资源。

转载于:https://www.jianshu.com/p/215dc6bae234