前端路由和后端路由的简析

后端路由

后端路由是利用后端处理URL与页面之间的映射关系.使用后段路由访问页面时,首先将请求发送服务器,服务器使用jsp或php动态地将数据添加到页面中,并且返回已经渲染好的html+css.在该域名中进行跳转会进行重复请求服务器,服务器再次渲染页面并进行返回.后端路由对SEO很友好.但是项目逻辑比较混乱,可读性较差,维护成本大.

后端路由进行页面访问(jsp)

前端路由是一种不用使浏览器刷新来进行页面跳转的技术,通常用来构建SPA(单页应用)

在处理多个页面时,服务器会对URL进行正则匹配,并且最后交给一个Controller来处理.最终生成HTML返回给前端.

前后端分离

后端只提供数据,不提供页面相关的结构.前端通过ajax请求来动态地请求服务器,此时已可以请求页面中部分的html代码来进行懒加载.

使用ajax

前端路由SPA

浏览器中显示的大部分内容都是有前端写的js代码在浏览器中执行并渲染出来的网页,整个网页只有一个html页面,在请求发生后,浏览器会将html和css和全部的js下载下来,并且将js分为不同的块,在url发生变化后将抽取出的js渲染成html到页面上

spa

前端路由改变URL的3种方法:

1.改变url的hash

location.hash = 'index'

2.进行history.pushState

history.pushState([data:{}],[title:string],[url:string])
使用这种模式会将url压入栈中,并且使后退按钮变为可用,使用后退会进行出栈操作history.back(),或history.go(-1)

3使用history.replace

history.replace([data:{}],[title:string],[url:string])
使用这种模式会对url进行替换,并不会压入栈中.