SPA前端路由的原理与实现

（一）什么是SPA

SPA：single page application 的简写～（单页应用）

简单的说，SPA就是一个web项目只有一个html页面，一个页面一旦加载完成，SPA不会因为用户的操作而进行页面的重新加载或者跳转，取而代之的是利用JS动态的变换html内容，从而来模拟多个视图间的跳转。

SPA只有一个html文件～

（二） 什么是路由

路由是根据不同的 url地址 展现不同的 内容 或者 页面

所谓的路由：客户发送一个请求，我们通过对应的 映射函数 来 处理客户请求。

路由的本质就是函数，url发起请求，通过映射函数处理请求。

（三） 路由出现的原因

之前都是多页面应用，直到ajax的出现，才有了SPA，有了单页面应用，但是SPA有以下几个缺点：

1. seo不友好，不方便搜索引擎收录

2. SPA无法记录用户的操作记录，无论刷新前进还是后退，都没有办法去展示用户真正期望的内容

为解决以上缺点，前端路由出现了～

（四）路由实现

路由实现的目标

1）改变url，并且不让服务器重新发送请求

2）监听到 url 的变化，显示页面对应内容

（五）路由的种类

1. hash模式

2. history模式

1) 什么是hash模式

hash是指url尾巴后的#号及后面的字符。如果没有#，hash为空。这里的#和css里的#是一个意思。hash也称作锚点，本身是用来做页面定位的，它可以使对应id的元素显示在可是区域内。

hash值变化 不会 导致浏览器向服务器发出请求，并且 hash 改变会触发 hashchange事件，浏览器的进后退也能对其进行控制，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。