现在有一个全新的路由代替了以前的 push.js。 这个路由支持在同一个html中内联多个页面,ajax加载新页面,前进和后退操作。
默认情况下,router 会自动拦截所有的链接点击事件,如果你希望一个链接通过浏览器原生跳转而不使用 router,你可以在链接上增加一个 class="external"
或者 external
注意:因为PC和移动端表现差异,官网一些Demo在PC上看起来有bug,但在移动端是正常的。
你可以在同一个HTML文件中内联编写多个页面。每一个页面都是一个 .page
容器,如果有多个页面,则需要用 .page-current
标记出第一次进入的时候应该显示的页面。
每一个 .page
容器都应该有一个全局唯一的id,路由器会使用这个id作为唯一标示,如果没有设置id,可能会导致路由出错。你只需要这样写一个链接就可以跳转到id对应的内联页面 <a href='#{page-id}'>跳转</a>
.
注意,内联页面只能在第一个页面编写,通过ajax加载的页面里面不能内联多个页面。
除了内联编写多个页面以外,你还可以通过ajax来加载新页面。通过ajax加载新页面和普通的链接写法没有区别,路由器会自动拦截链接的点击事件,并通过ajax请求加载新的页面。
{% highlight html %}我们对后退操作进行了封装,你只需要在任意链接上增加一个 .back
类,点击就会自动返回到上一页。为了防止在某些情况下无法返回,最好同时设置 href
指定上一页的地址,这样当无法后退的时候,会直接加载指定的地址。
或者你可以通过调用 $.router.back(url)
来执行返回上一页操作,同样为了确保能正常返回,最好把上一页的地址作为参数传入。
你可以通过调用 $.router.loadPage(url)
来加载一个页面,参数url既可以是一个ajax页面的地址,也可以是一个内联页面的id.
从一个页面准备开始加载,到执行完加载动画,会按顺序触发以下事件:
事件 | 说明 |
---|---|
pageLoadStart | 发送Ajax之前触发 |
pageLoadCancel | 取消了正在发送的ajax请求 |
pageLoadError | Ajax 请求失败 |
pageLoadComplete | Ajax 请求结束,无论是成功还是失败 |
pageAnimationStart | 新页面的DOM插入当前页面之后,动画执行之前 |
pageAnimationEnd | 新页面动画执行完毕 |
pageInit | 新页面中的组件初始化完毕 |
pageReinit | 返回到上一个页面的时候触发 |
其中 pageLoad* 事件是在 window 上触发,其他都是在 .page
元素上触发。为了性能考虑,最好通过 document 代理监听。如果是内联页面,则没有前面的四个 pageLoad* 事件。
你可以这样监听事件:
{% highlight js %} $(document).on("pageInit", "#page-index", function(e, pageId, $page) {}); $(document).on("pageInit", function(e, pageId, $page) { if(pageId == "pageIndex") {} }); {% endhighlight %}