在讲前端路由之前，先说下后端路由，以及为什么出现了前端路由。
后端路由： 浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示，java web中的jsp就是如此实现的。常用的后台MVC模式的基本路由处理流程：浏览器输入一个url请求，从中找到Controller和Action的值，将请求传递给Controller处理，Controller获取Model数据对象，并且将Model传递给View,最后View呈现界面。
例如输入一个url：localhost/home/index
其中localhost是域名，对应结构{controller}/{action}/{id}
优点：分担了前端的压力，html和数据的拼接都是由服务器完成。
缺点：当项目十分庞大时，加大了服务器端的压力，同时在浏览器端不能输入制定的url路径进行指定模块的访问。另外一个就是如果当前网速过慢，那将会延迟页面的加载，对用户体验不是很友好。
前端路由： 随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。
优点：1、用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，界面展现快。2、可以再浏览器中输入指定想要访问的url路径地址。3.实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。
缺点：1、对SEO不是很友好2、在浏览器前进和后退时候重新发送请求，没有合理缓存数据。3，初始加载时候由于加载所有模块渲染，会慢一点。
前端路由目前主要有两种方法：
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值不同。
这个事件有 2 个重要的属性：oldURL 和 newURL，分别表示点击前后的 url
<!-- 该页面路径为 https://www.abc.com/index.html --> <a href="#page2" >click me</a> <script type="text/javascript"> window.onhashchange = function(e){ console.log(e.oldURL); //https://www.abc.com/index.html console.log(e.newURL); //https://www.abc.com/index.html#page2 } </script>
这样我们可以这样建立一个 DOM
<nav> <a href="#page1" data-target="#index">page1</a> <a href="#page2" data-target="#info">page2</a> <a href="#page3" data-target="#detail">page3</a> <a href="#page4" data-target="#show">paga4</a> <a href="#page5" data-target="#contact">paga5</a> </nav> <div> <div> <h1>This is index page</h1> </div> <div> <h1>This is info page</h1> </div> <div> <h1>This is detail page</h1> </div> <div> <h1>This is show page</h1> </div> <div> <h1>This is contact page</h1> </div> </div>
为了好看我们加上 css， 比较重要的样式已经在代码里标出来了。
body{ padding:0; margin: 0; } h1{ margin: 0 0 0 160px; } nav{ width: 150px; height: 150px; float: left; } nav a{ display: block; background: #888; border: 1px solid #fff; border-top: none; width: 150px; font-size: 20px; line-height: 30px; text-align: center; color: #333; text-decoration: none; } .container{ height: 154px; } /* page 部分比较重要*/ .page{ display: none; } .page.active{ display: block; } /* page 部分比较重要*/ nav a.active, .container{ background: #ddd; border-right-color: #ddd; }
重点是下面的 javascript，这里 DOM 操作我们借助 jQuery