单页应用SPA的路由

关于单页应用

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。简单来讲就是用户只须要加载一次页面就能够再也不请求，当点击其余子页面时只会有相应的URL改变而不会从新加载。

单页应用的实现

若是你的项目涉及到单页面的话，路由是必不可少的。从上面的介绍中能够知道单页应用的实现依赖与路由，在这里咱们能够将上面路由的过程分为两部分：

1. 更新URL页面不刷新
   ps: 以前面试被问到过这个问题，如今才恍然大悟面试官大大想要问的是这个点。 ==。
2. 监听URL的变化，执行页面替换逻辑

实现改变URL页面不刷新

按照常规的逻辑咱们切换URL好像就会跳转网页，可是转念一项锚连接的URL不是也改变了吗？ 这里，存在两种知足需求的方式。

• 利用URL中的hash方式
  了解http协议就会知道，url的组成部分有不少，譬如协议、主机名、资源路径、查询字段等等，其中包含一个称之为片断的部分，以“#”为标识。打开控制台，输入 location.hash，你能够获得当前url的hash部分（若是当前url不存在hash则返回空字符串）。接下来，输入 location.hash = '123'，会发现浏览器地址栏的url变了，末尾增长了’#123’字段，而且，页面没有被从新刷新。很显然，这很符合咱们的要求。
• 利用H5的history API
  html5引入了一个history对象，包含了一套访问浏览器历史的api，能够经过window.history访问到它。 HTML5 History API包括2个方法：history.pushState()和history.replaceState()，和1个事件：window.onpopstate。这两个方法都是对浏览器的历史栈进行操做，将传递的url和相关数据压栈，并将浏览器地址栏的url替换成传入的url且不刷新页面，并且他们的参数也相同，第一个参数用于存储该url对应的状态对象，该对象可在onpopstate事件中获取，也可在history对象中获取。第二个参数是标题，目前浏览器并未实现。第三个参数则是设定的url。通常设置为相对路径，若是设置为绝对路径时须要保证同源。。不一样的是pushState 将指定的url直接压入历史记录栈顶，而 replaceState 是将当前历史记录栈顶替换成传入的数据。不太低版本对history AIP的兼容性不是很好。

监听URL的变化，执行页面替换逻辑

1. 对于hash方式，咱们一般采用监听hashchange事件，在事件回调中处理相应的页面视图展现等逻辑。在不支持hashchange事件的浏览器中，咱们只能经过setInterval设置来模拟hashchange（不停的对比URL若是有改变）。
   var oldHash = location.hash; var oldURL = location.href; setInterval (function () { var newHash = location.hash; var newURL = location.herf; if (newHash !== oldHash && typeof window.onhashchange === 'function') { // 这里执行onhashchange的回调 } }, 100)
2. 采用history API的形式时，须要触发onpopstate，popstate 事件只会在浏览器某些行为下触发, 好比点击后退按钮（或者在JavaScript中调用 history.back() 方法）。这也就是说，咱们在使用history API改变浏览器的url时，仍须要额外的步骤去触发 popstate 事件，例如调用 history.back() 会 history.forward() 等方法

两种实现的比较

总的来讲，基于Hash的路由，兼容性更好；基于History API的路由，更加直观和正式。可是，有一点很大的区别是，基于Hash的路由不须要对服务器作改动，基于History API的路由须要对服务器作一些改造。