路由

现在有一个全新的路由代替了以前的 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>.

{% highlight html %}

路由

返回

路由

这是内联编写的页面,点击左上角的 返回 按钮返回上一页。
{% endhighlight %}

注意,内联页面只能在第一个页面编写,通过ajax加载的页面里面不能内联多个页面。

ajax页面

除了内联编写多个页面以外,你还可以通过ajax来加载新页面。通过ajax加载新页面和普通的链接写法没有区别,路由器会自动拦截链接的点击事件,并通过ajax请求加载新的页面。

{% highlight html %}

路由

{% endhighlight %} {% highlight html %}
返回

路由

这是ajax 加载的新页面,点击左上角的 返回 按钮返回上一页。
{% endhighlight %}

后退

我们对后退操作进行了封装,你只需要在任意链接上增加一个 .back 类,点击就会自动返回到上一页。为了防止在某些情况下无法返回,最好同时设置 href 指定上一页的地址,这样当无法后退的时候,会直接加载指定的地址。

或者你可以通过调用 $.router.back(url) 来执行返回上一页操作,同样为了确保能正常返回,最好把上一页的地址作为参数传入。

{% highlight html %} 返回上一页 {% endhighlight %}

JS方法

你可以通过调用 $.router.loadPage(url) 来加载一个页面,参数url既可以是一个ajax页面的地址,也可以是一个内联页面的id.

{% highlight js %} $.router.loadPage("/detail"); //加载ajax页面 $.router.loadPage("#about"); //加载内联页面 {% endhighlight %}

事件

从一个页面准备开始加载,到执行完加载动画,会按顺序触发以下事件:

事件 说明
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 %}