1.路由器 JS API
Framework7 中的路由器使用非常灵活，他可以有多种方式来处理Page:
-
Ajax Pages,从一个指定的URL加载页面，通常是另外一个页面的文件地址（默认行为）。 - 通过
JSAPI 创建和加载 动态页面 - 如果你的页面已经写在
DOM中了，那么你可以直接使用 内联页面 ，而不用再去加载。 - 可以加载使用
Template7编写的模板 - 可以在你的应用中混合使用所有上面的这些方法。
视图是应用中的一个独立部分，她有自己的设置、页面切换和浏览历史。路由器也是初始化之后的视图(View)中的一部分，所以你使用路由器之前必须要记得先初始化视图（使用myApp.addView()方法）
2.视图中页面切换相关方法：
在视图中主要有两个路由器方法:
-
mainView.router.load(options)- 把一个页面加载到当前视图 -
mainView.router.back(options)- 这个方法会触发一个反向的动画并回到上一个页面，也就是浏览历史上的回退
上面这些方法都接受一个options对象作为参数，这个参数有很多属性。url， content， context 等等。
3.视图中页面切换的快捷方式
- 加载新页面的方法:
mainView.router.loadPage(url)- 加载指定的页面到视图中。其实和你在页面中点击一个链接是一样的效果。
url- 需要加载的页面的URL
mainView.router.loadContent(content)- 把动态生成的内容当做一个页面加载.
content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement]- 需要加载的内容
4.重新加载当前页面的方法:
-
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]- 需要加载的内容
5.重新加载上一个页面的方法（如果视图的DOM中有两个页面）：
mainView.router.reloadPreviousPage(url)- r重新加载指定的页面到视图的上一个页面。同时也会修改视图的浏览历史，把最后一条记录替换成指定的URL。mainView.router.reloadPreviousContent(content)- 重新加载指定的内容到视图的上一个页面。同时也会修改视图的浏览历史，把最后一条记录替换成指定的URL。
6.刷新页面的方法:
-
mainView.router.refreshPage()- 刷新视图的当前页面。和你调用.reloadPage
方法并且传入当前页面的URL是一样的效果 -
mainView.router.refreshPreviousPage()- 刷新视图的上一个页面。和你调用.reloadPreviousPage
方法并且传入上一个页面的URL是一样的效果
7.Ajax页面
默认情况下 Framework7 会使用 Ajax 加载所有的页面，除了带有 external class的链接（<a href="somepage.html" class="external">）和没有正确 href 值的链接（比如是空的或者是 #）。
在 初始化 时候传递不同的 ajaxLinks 参数可以改变这个行为。
所以我们如果需要创建一个链接指向 about.html，我们只需要按照平时一样写 <a>标签就可以：
<a href="about.html">Go to About page</a>
当我们点击这个链接的时候，Framework7会通过Ajax获取 about.html，解析它的内容，然后把它插入到DOM中，并且做一个动画切换到这个新页面。
- Page 内部的结构
因为Framework7有一个非常聪明的解析器，所以在内部页面中我们不需要完整的HTML结构（head,body,views,pages等)。比如 about.html的内容：
<!-- That is all we have in about.html file -->
<div class="page" data-page="about">
... About page content goes here
</div>
重点是，Framework7解析器会尝试在ajax加载的页面中寻找 <div class="page">，所以我们不需要完整的HTML结构。当然这不是强制的，你可以写出完整的页面结构。
9.多个Page的结构
两个view应该和主页中的view有相同的class。这样Framework7就知道应该哪一个page应该放在哪一个view中。
10.动态导航栏的文件结构
nav回退，
<div class="page" data-page="about">
<!-- Just add additional "back" class to link -->
<a href="index.html" class="back">
Go back to home page
</a>
</div>
关于后退链接几个需要注意的地方：
- 如果在浏览历史中有页面，
Framework7会忽略掉href属性中的值。 - 如果在浏览历史中没有页面（比如你在首页点了后退），
Framework7会加载href属性指定的url。你无法改变上述行为。
对后退链接来说， href 属性不是必须得，但是为了向下兼容，最好还是写上。
11.滑动后退(iOS only)
如果你启用了 "swipeBackPage" 应用参数，那么你可以通过从左向右滑动来后退到上一个页面。但是有时候你会想在某些页面中禁用这个行为，这种情况下你只需要加一个 no-swipeback class 即可。
<div class="page no-swipeback">
...
</div>
12.取消/增加页面切换动画
有时候你在加载页面或者后退的时候需要立刻执行，不想要一个切换的动画效果，可以通过增加一个 "no-animation" class 在链接上即可。
div class="page" data-page="about">
<!-- Add additional "no-anmation" class to link to disable animated page transition -->
<a href="about.html" class="no-animation">
Load About page immediately
</a>
<!-- The same rule for back link -->
<a href="index.html" class="back no-animation">
Go back immediately
</a>
</div>
如果我们已经全局禁用了动画，但是在某些链接上希望启用这些动画，那么我们可以给链接加上 "with-animation" class。
13.通过 data 标签配置更多选项
有时候我们希望在某些链接上有更多的配置，我们可以使用作为data-属性来配置所有在 视图链接方法中的参数。
<a href="about.html" data-reload="true" data-ignore-cache="true">Refresh page</a>
14.用javascript加载page，和回退page
略
15.结论
Framework7 中，页面之间的链接和路由都是很简单的，你只需要记住：
- 你需要使用普通的
<a>标签，她有一个href属性指向你需要加载的页面。 - 通过
ajax加载的页面不需要有完整的HTML结构。只需要有<div class="page">(和<div class="navbar">如果你需要动态的滚动条) - 如果你在同一个文件中有多个
Page，把他们用<div class="view">包裹起来，并且给每一个View设置好正确的class。 - 只需给一个链接加上
backclass (<a href="index.html" class="back">)，她就会自动变成一个后退链接。
