语言: 英文中文

路由器 JS API

Framework7 中的路由器使用非常灵活,他可以有多种方式来处理Page:

  • Ajax Pages - 从一个指定的URL加载页面,通常是另外一个页面的文件地址(默认行为)。

  • 通过JS API 创建和加载 动态页面

  • 如果你的页面已经写在DOM中了,那么你可以直接使用 内联页面,而不用再去加载。

  • 你可以加载使用 Template7 编写的模板

  • 最重要的是,你可以在你的应用中混合使用所有上面的这些方法。

视图 章节中说过, 视图是应用中的一个独立部分,她有自己的设置、页面切换和浏览历史。路由器也是初始化之后的视图中的一部分,所以你使用路由器之前必须要记得先初始化视图(使用 myApp.addView() 方法)。

var mainView = myApp.addView('.view-main');

视图中页面切换相关的方法

There are two main router methods in View:

在视图中主要有两个路由器方法:

mainView.router.load(options) - 把一个页面加载到当前视图

mainView.router.back(options) - 这个方法会触发一个反向的动画并回到上一个页面,也就是浏览历史上的回退

上面这些方法都接受一个 options 对象作为参数,这个参数有如下属性:

参数 类型 说明
url string 需要加载的页面的URL
content string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement] 需要加载的动态页面的内容
pageName string 需要加载的页面的名称(data-page)。只用在内联页面(DOM cached)。
template function (Template7 compiled template) 需要加载并渲染的模板
context object or array 渲染Template7 模板时需要的上下文。这里有更多说明Template7 Pages
contextName string 可选的。用来渲染 Template7 的 templatesData 的上下文名称/路径。这里查看更多说明 Template7 Pages
query object Object with additionall query parameters that could be retreived in query object of Page Data
force boolean 可选的。只对 back 方法有效。如果设置为 true,那么会忽略浏览历史中的上一个页面,而是直接加载指定的页面。
ignoreCache boolean 可选的。如果设置为 true ,那么会忽略URL对应的缓存,并且再次通过XHR来加载。
animatePages boolean 可选的。可以覆盖在 View 中的相同参数,打开/关闭页面切换的动画。
reload boolean 可选的。如果设置为 true,那么不会当做新页面加载,而是直接替换当前视图的当前页面。并且在视图浏览历史中替换最后一条历史。
reloadPrevious boolean 可选的。和 reload 一样,不过是对上一个页面。
pushState boolean 可选的。是否把浏览历史存储在浏览器的浏览历史中。(这样可以使用浏览器的后退/前进按钮)

注意, url, content, pageName 这三个参数,你只能同时使用一个。

视图中页面切换的快捷方式

加载新页面的方法:

mainView.router.loadPage(url) - 加载指定的页面到视图中。其实和你在页面中点击一个链接是一样的效果。

  • url - 需要加载的页面的URL

mainView..router.loadContent(content) - 把动态生成的内容当做一个页面加载

  • content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement] - 需要加载的内容

重新加载当前页面的方法:

mainView.router.reloadPage(url) - 重新加载指定的页面到视图的当前页面。同时也会修改视图的浏览历史,把最后一条记录替换成指定的URL。

  • url - 需要加载页面的URL

mainView.router.reloadContent(content) - 重新加载指定的内容到视图的当前页面。同时也会修改视图的浏览历史,把最后一条记录替换成指定的URL。

  • content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement] - 需要加载的内容

重新加载上一个页面的方法(如果视图的DOM中有两个页面):

mainView.router.reloadPreviousPage(url) - 重新加载指定的页面到视图的上一个页面。同时也会修改视图的浏览历史,把最后一条记录替换成指定的URL。

  • url - 需要加载页面的URL

mainView.router.reloadPreviousContent(content) - 重新加载指定的内容到视图的上一个页面。同时也会修改视图的浏览历史,把最后一条记录替换成指定的URL。

  • content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement] - 需要加载内容

刷新页面的方法:

mainView.router.refreshPage() - 刷新视图的当前页面。和你调用 .reloadPage 方法并且传入当前页面的URL是一样的效果

mainView.router.refreshPreviousPage() - 刷新视图的上一个页面。和你调用 .reloadPreviousPage 方法并且传入上一个页面的URL是一样的效果