详解SPA中前端路由基本原理与实现方式

在讲前端路由之前，先说下后端路由，以及为什么出现了前端路由。

后端路由： 浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示，java web中的jsp就是如此实现的。常用的后台MVC模式的基本路由处理流程：浏览器输入一个url请求，从中找到Controller和Action的值，将请求传递给Controller处理，Controller获取Model数据对象，并且将Model传递给View,最后View呈现界面。

例如输入一个url：localhost/home/index

其中localhost是域名，对应结构{controller}/{action}/{id}

前端路由： 随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。

前端路由目前主要有两种方法：

1、利用url的hash,就是常用的锚点（#）操作，类似页面中点击某小图标，返回页面顶部，JS通过hashChange事件来监听url的改变，IE7及以下需要轮询进行实现。一般常用框架的路由机制都是用的这种方法，例如Angualrjs自带的ngRoute和二次开发模块ui-router，react的react-route,vue-route…

2、利用HTML5的History模式，使url看起来类似普通网站，以”/”分割，没有”#”，但页面并没有跳转，不过使用这种模式需要服务器端的支持，服务器在接收到所有的请求后，都指向同一个html文件，通过historyAPI，监听popState事件，用pushState和replaceState来实现。

SPA 前端路由原理与实现方式

通常 SPA 中前端路由有2中实现方式，本文会简单快速总结这两种方法及其实现：

修改 url 中 Hash 利用 H5 中的 history

Hash

我们都知道 url 中可以带有一个 hash， 比如下面 url 中的 page2

https://www.abc.com/index.html#page2

window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件：

直接更改浏览器地址，在最后面增加或改变#hash； 通过改变location.href或location.hash的值； 通过触发点击带锚点的链接； 浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。