首页 » Framework7 » Framework7 路由器
网站地图

路由器 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 对象作为参数，这个参数有如下属性:

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


注意， 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是一样的效果