spa前端路由的原理与实现方式

spa是什么

百科：单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页的页面即为一个html页面，能够理解为，某个应用中全部的其余页面和单元均为一个预设好的根页面的子组件，经过js，css来控制众多子组件的替换和更新，从而达到模拟页面跳转的情景。我把这种应用称之为spa。

前端路由的进化

提到了前端路由就不得不提到后端路由，一个后端路由能够理解为一个url发起一个请求，获取数据（html模板，文本信息，图片等）而后经过控制器处理后再向浏览器渲染处理事后的页面，就会出现一个新的页面。这个过程就是所谓的ssr。而后前端向后端请求资源的方式就是后端路由了。

后端路由的弊端

可是很明显，每次须要更新页面都须要发起新的请求，服务器压力会很大，若是网络情况很差，还会形成极差的用户体验。 可是，当Ajax出现以后，这种交互方式慢慢发生了改变。利用Ajax的异步加载的机制，能够不须要刷新页面便可发送新的请求。从而实现spa，提升用户体验，减小服务端压力。

未利用前端路由的spa的弊端

凡事有利有弊，当时的spa也有本身的劣势：

• spa没法记住用户的操做，前进后退，刷新都没法展现用户期待的内容
• spa会有多种业务页面，一个url，seo不友好，不利于搜索引擎进行收录

因而渐渐演化出了前端路由来解决上述两个问题。 前端路由的目的：

• 当咱们改变url的时候，浏览器不会向服务器发起请求
• 实时监听url的变化

前端路由的实现机制

• 监听url中hash值得变化
• HTML5 history模式

hash

hash值得改变不会致使浏览器向服务器发送请求，而且改变的时候会触发hashchange事件，hashchange能够捕捉url的变化，从而实现spa。

https://blog.csdn.net/JaxHu/#collection-list
复制代码

举例，#collection-list 就是hash值，在H5的history模式出现以前，前端路由基本都是用hash模式来实现的。

history

History 路由是基于 HTML5 规范，在 HTML5 规范中提供了 history.pushState和history.replaceState 来进行路由控制。当你执行

history.pushState({}, null, ‘/home’) 
复制代码

页面 url 会从

http://localhost:8080/ 
复制代码

跳转到

http://localhost:8080/home 
复制代码

能够在改变 url 的同时，并不会刷新页面。

先来简单看看 pushState 的用法，参数说明以下：

• state：存储 JSON 字符串，能够用在 popstate 事件中
• title：如今大多浏览器忽略这个参数，直接用 null 代替
• url：任意有效的 URL，用于更新浏览器的地址栏

hash和history的对比

• hash兼容性高，甚至能够兼容到老版本的IE浏览器

• history是基于H5的实现模式，对低版本浏览器不必定兼容

• hash模式会在url中夹带#符号，看起来多多少少会有些不天然

• history模式不会有这种状况

总结

具体的实现能够去看看其余大佬的文章，此文不作详述。总以前端路由的目的是为了页面无刷新，而且能够进行页面的更替。