详解单页面路由的几种实现原理（附demo）

前言

路由是每一个单页面网站必需要有的，因此，理解一下原理，我以为仍是比较重要的。

本篇，基本不会贴代码，只讲原理，代码在页底会有githup地址，主意，必定要放在服务本地服务器里跑（由于有ajax），

但愿能帮到你。

众所周知单页面网站的路径跳转全是经过js来控制的，下面我们来说讲

第一种：url彻底不动型

这一种的状况是url彻底不动，即你的页面怎么改变，怎么跳转url都不会改变

这种状况的原理 就是纯ajax拿到页面后替换原页面中的元素，

这种状况没什么好讲的，好的一言不和上代码    demo（地址在页底）   这里有所有的代码

第二种：带hash(#)型

这种类型的优势就是刷新页面，页面也不会丢。

实现原理：

小明说：若是window有一个事件能让我监听url的变化，那我就能实先路由，

那样我就能够根据url的变化，来经过ajax请求参数来渲染页面，

一个url对应一个页面，也不会重复，多好了。

我：还真有，可是只能监听 #后面参数的变化。

小明说：唉，那就凑合一下把。

经过监听 hash（#）的变化来执行js代码 从而实现 页面的改变      

核心代码：

window.addEventListener('hashchange',function(){
self.urlChange()
})

就是经过这个原理 只要#改变了 就能触发这个事件，这也是不少单页面网站的url中都也 （#）的缘由

demo在下面

第三种：无hash（#）型

这种类型是经过html5的最新history api来实现的   能正常的回退前进  很好

url是这样的  www.ff.ff/jjkj/fdfd/fdf/fd       和普通的url同样，可是也有缺点 ，就是一刷新页面 页面就会丢，

由于 只要刷新 这个url（www.ff.ff/jjkj/fdfd/fdf/fd）就会请求服务器，然而服务器上根本没有这个资源，因此就会报404，解决方案就 配置一下服务器端（能够百度一下）

实现原理：

用了 这几个 api

history.pushState
history.replaceState
history.state
window.onpopstate事件

第一步：history.pushState(null,null,"/abc");  改变url

第二部：执行一个函数（这个函数里有改变页面的代码）

就这末简单。

 

 

下面讲一下这几个api怎么用

pushState是将指定的URL添加到浏览器历史里,存储当前历史记录点API:history.pushState(state, title, url)

// @state状态对象：记录历史记录点的额外对象，能够为空
// @title页面标题：目前全部浏览器都不支持
// @url可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域

history.pushState的目的

SEO优化
更少的数据请求
更好的用户体验

history.replaceState

replaceState是将指定的URL替换当前的URL,替换当前历史记录点

replaceState的api和pushState相似，不一样之处在于replaceState不会在window.history里新增历史记录点，而pushState会在历史记录点里新增一个记录点的

history.state

当前URL下对应的状态信息。若是当前URL不是经过pushState或者replaceState产生的，那么history.state是null。

state对象虽然能够存储不少自定义的属性，但对于不可序列化的对象则不能存储

window.onpopstate事件

window.onpopstate事件主要是监听历史记录点，也就是说监听URL的变化，但会忽略URL的hash部分。

history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，而且页面无刷的时候（因为使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。经过event.state也能够获取history.state。

注意点：

javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。
谷歌浏览器和火狐浏览器在页面第一次打开的反应是不一样的，谷歌浏览器奇怪的是回触发onpopstate事件，而火狐浏览器则不会。

 

最后：

这3个demo 实现的还算能够，代码结构也还好把，最长的120多行，相信你能够看的懂，若是真的项目中须要用的话，，那那代码结构还须要优化一下，

原本我还想着把这3个deom给整合一下呢，变成一个功能完备的路由，唉，最近活多啊，下次吧！！！！ 

 

好了 是给   完整例子的时候了    demo