前端路由

一. 前端路由

现代前端开发中最流行的页面模型，莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚本来完成，而不是由后端渲染完毕后前端只负责显示。前端三驾马车Angular,Vue,React均基于此模型来运行的。SPA能够以模拟多页面应用的效果，归功于其前端路由机制。

前端路由，顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。angularjs中的ui-router,vue中的vue-router,以及react的react-router均是对这种功能的具体实现。

既然前端路由这么牛逼，那必须的好好研究一下。

二. 两种实现方式及其原理

常见的路由插件中两种方式都是支持且可以切换的，例如angularjs1.x中就可以通过以下代码从Hash模式切换到H5模式：
$locationProvider.html5Mode(true);
切换到HTML5的路由模式，主要用于避免url地址中包含#而引发的问题。

1.HashChange

1.1 原理

HTML页面中通过锚点定位原理可进行无刷新跳转，触发后url地址中会多出# + 'XXX'的部分，同时在全局的window对象上触发hashChange事件，这样在页面锚点哈希改变为某个预设值的时候，通过代码触发对应的页面DOM改变，就可以实现基本的路由了,基于锚点哈希的路由比较直观，也是一般前端路由插件中最常用的方式。

1.2 应用

下面通过一个实例看一下,当点击angularjs的连接时，可以看到控制台打印出了相应的信息。

2.HTML5 HistoryAPI

2.1 原理

HTML5的History API为浏览器的全局history对象增加的扩展方法。一般用来解决ajax请求无法通过回退按钮回到请求前状态的问题。

在HTML4中，已经支持window.history对象来控制页面历史记录跳转，常用的方法包括：

• history.forward(); //在历史记录中前进一步
• history.back(); //在历史记录中后退一步
• history.go(n): //在历史记录中跳转n步骤，n=0为刷新本页,n=-1为后退一页。

在HTML5中，window.history对象得到了扩展，新增的API包括：

• history.pushState(data[,title][,url]);//向历史记录中追加一条记录
• history.replaceState(data[,title][,url]);//替换当前页在历史记录中的信息。
• history.state;//是一个属性，可以得到当前页的state信息。
• window.onpopstate;//是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数。

2.2 应用

浏览器访问一个页面时，当前地址的状态信息会被压入历史栈,当调用history.pushState()方法向历史栈中压入一个新的state后，历史栈顶部的指针是指向新的state的。可以将其作用简单理解为 假装已经修改了url地址并进行了跳转 ,除非用户点击了浏览器的前进,回退,或是显式调用HTML4中的操作历史栈的方法，否则不会触发全局的popstate事件。

在下面的示例中，点击导航按钮，可以看到url地址栏发生了变化，且控制台打印出了响应的信息。

3.hash 和 history API对比

对比	hash路由	History API 路由
url字符串	丑	正常
命名限制	通常只能在同一个document下进行改变	url地址可以自己来定义，只要是同一个域名下都可以，自由度更大
url地址变更	会改变	可以改变，也可以不改变
状态保存	无内置方法，需要另行保存页面的状态信息	将页面信息压入历史栈时可以附带自定义的信息
参数传递能力	受到url总长度的限制，	将页面信息压入历史栈时可以附带自定义的信息
实用性	可直接使用	通常服务端需要修改代码以配合实现
兼容性	IE8以上	IE10以上