浅谈前端路由的概念
共 1743字,需浏览 4分钟
·
2021-07-20 16:59
1.Web路由
1.1 后端路由
Web路由的概念简单来说就是根据不同URL渲染不同的页面。在前后端不分离的时代,路由往往指的是后端路由(服务端路由),即当服务端接收到客户端发来的 HTTP 请求,就会根据所请求的相应 URL,进行文件读取,数据库读取等操作,使用模板引擎将相应结果与模板结合后进行渲染,将渲染完毕的页面发送给客户端。
优缺点
优点:seo友好,爬虫爬取到的页面就是最终的渲染页面。
缺点:每次发起请求都要刷新页面,用户体验不好,服务器压力大。
1.2 前端路由
说到前端路由,必须先提一下Ajax与SPA。Ajax技术的兴起促使了 SPA—单页面应用的出现,由于Ajax可以做到页面的局部更新,因此单页应用页面的交互和页面的跳转都是无刷新的,无刷新就意味着无需处理html文件的请求,因此用户体验很好。但相应的,由于页面数据需要通过Ajax获取,因此爬虫获取到的html只是模板而不是最终的渲染页面,因此会不利于seo。为了实现单页应用,所以就有了前端路由。
前端路由的概念简单来讲就是,当路由发生变化,不请求服务端,而是通过js的方式修改dom(组件替换),并发送Ajax获取数据来达到页面跳转的效果。因此实现前端路由有两个关键点:
如何改变url不让浏览器向服务器发送请求。
如何监听到url的变化,并执行对应的操作
这里就要引出实现前端路由的两种路由模式:hash模式和history模式
2.前端路由的实现模式
2.1 hash模式
概念:hash 就是指 url 后的 # 号以及后面的内容
特点:hash模式有以下几个特点
hash值的变化不会导致浏览器向服务器发送请求,不会引起页面刷新。
hash值变化会触发hashchange事件。
hash值改变会在浏览器的历史中留下记录,使用浏览器的后退按钮,就可以回到上一个hash值。
hash永远不会提交到服务端,即使刷新页面也不会。
由此可见hash模式的特点完全可以满足前端路由的实现需求,所以在 H5 的 history 模式出现之前,基本都是使用 hash 模式来实现前端路由。
优缺点
优点:
1、兼容性好,支持低版本和IE浏览器。
2、实现前端路由无需服务端的支持。
缺点:
URL带#,路径丑
2.2 history模式
概念:在 HTML5 之前,浏览器就已经有了 history 对象来控制页面历史记录跳转,主要有以下方法。
history.forward():前进
history.back():后退
history.go(n):加载历史列表中的某个具体的页面
在 HTML5 的规范中,history 新增了以下几个 API:pushState(追加) 和 replaceState(替换),通过这两个 API 可以改变 url 地址且不会发送请求,同时还新增popstate 事件。通过这些API就能用另一种方式来实现前端路由,其实现原理跟与hash模式 实现类似,只是用了 HTML5 的实现,单页面应用的 url 不会多出一个#,会更加美观。
关于History模式有两点需要说明:
history模式如何监听路由变化
history模式下,浏览器的前进后退(history.back(), history.forward()等)会触发popstate 事件,但pushState,replaceState 并不会触发popstate事件。因此要实现路由变化的侦听,我们需要重写这两个方法,可以通过事件中心(EventBus)添加事件通知。
history模式需要后端支持
由于history模式没有 # 号,所以当用户手动刷新或直接通过url进入应用时,浏览器还是会给服务器发送请求。但服务端无法识别这个 url ,因此为了避免出现这种情况,history模式需要服务端的支持,即服务端需要把匹配不到的所有路由都重定向到根页面。
优缺点
优点:
路径好看
缺点:
1、兼容性差,不能兼容IE9。
2、需要服务端支持。