21 前端渲染和后端渲染，前端路由和后端路由

什么是路由

这里的路由指的就是一种映射关系 !

后端渲染和路由

大致过程:

用户输入url, 浏览器向服务器发送请求, 服务器通过jsp技术 (后端渲染) , 直接帮你写好界面(html+css+java, 其中java是从数据库获取数据, 并动态的展示到界面上), 然后只返回html+css给用户; 点击某些界面元素, 就会请求不同的url.

这里是后端处理url和jsp界面之间产生了映射关系, 所以是后端路由 !

解释:

每一个界面对应一个url, 浏览器通过url请求到不同的资源, url的资源在后端被渲染好了之后再返回给前端直接显示(服务器直接渲染好对应的HTML页面, 返回给客户端进行展示), 要进行复杂交互的话, 菜鸟看了一下, 感觉好复杂, eg: https://blog.csdn.net/fengsigaoju/article/details/54767081


好处: 前端耗时少，即减少了首屏时间，不占用客户端运算资源（解析模板）, seo支持更好


坏处:占用服务器资源, 可维护性差, 编码效率低

前后端分离, 前端渲染(还没有前端路由)

基本过程:

用户输入url, 浏览器向静态资源服务器请求html+css+js, 然后浏览器渲染html+css+js, 而渲染js的时候, 又会通过网络请求(eg: ajax…)访问API服务器, 然后API服务器返回你所需要的数据, 再通过后面的js动态显示给用户

这时候还是后端路由, 将你的每一套资源和url映射起来 ! 但是已经是前端渲染了:

前端路由

过程:

用户输入url, 浏览器向静态资源服务器请求一整套的html+css+js(也只有一套), 虽然都请求了, 但是并没有全部执行, 假设有三个按钮, 第一个是home按钮, 点击home按钮的时候, 浏览器就会通过前端路由生成一个url(这个url和以前不一样, 不会去服务器请求资源), 并从一整套代码里抽取出要显示的一部分代码并展示. (在Vue中时, 每一个url对应得就是一个组件)

这时候, url和某一部分的html+css+js (页面) 行成了映射关系, 而这是由前端管理的, 所以是前端路由!

如何改变url不刷新界面

注意:

pushstate和replacestate区别, 前者可以前进后退, 后者是替换, 所以不能.

vue里router的模式

vue默认是hash模式, 不是很好看, 会有#