一：页面路由
Framework7的页面之间跳转有4种方法：
-
异步加载：从一个指定的URL加载页面，通常是另外一个页面的文件地址（默认行为）【常用】
-
内联页面：在index.html中将所有的page加载进来，在view中直接通过名字进行跳转。【常用】
-
使用模版：Framework7可以定义文件模版，可以通过调用模版并传值生成页面并且加载进来。【高阶用法】
二：异步加载
1）页面跳转
用<a>标签创建一个链接指向页面文件，当点击这个链接的时候，Framework7会通过Ajax获取文件，解析它的内容，然后把它插入到DOM中，并且做一个动画切换到这个新页面。如：
<a href="about.html">Go to About page</a>
2）后退：使用back类标签
<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>
3）ios有滑动后退动作，可以设置或关闭它
4）关闭切换动画：为了提升切换效率，可以使用no-animation类关闭切换动画
<a href="about.html" class="no-animation"> Load About page immediately </a>
5）通过 data-XX 进行更多配置，其中 XX 参数主要有：
| 参数 | 类型 | 说明 |
|---|---|---|
| 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 queryobject 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, template 这四个参数，你只能同时使用一个。
6）在js中加载页面
view.router.loadPage(‘页面.html‘);
7）在js中后退
view.router.back();
三：加载动态页面
1）在js中加载动态页面
我们可以在js文件中，通过拼接html字符串来创建、加载动态页面。
// 1:HTML Content of new page: var newPageContent = ‘<div class="page" data-page="my-page">‘ + ‘<div class="page-content">‘ + ‘<p>Here comes new page</p>‘ + ‘</div>‘ + ‘</div>‘; //2:Load new content as new page view.router.loadContent(newPageContent);
2）在js中创建页面内容多有不便，我们也可以在index.html的script标签间创建动态page，然后在js中通过id选择器动态加载它。
创建动态page：
<script type="text/template" id="myPage"> <div class="navbar"> <div class="navbar-inner"> <div class="center">My Page</div> </div> </div> <div class="page" data-page="my-page"> <div class="page-content"> <p>Here comes page content</p> </div> </div> </script>
加载动态page：
view.router.loadContent($(‘#myPage‘).html());
四：内联页面(DOM缓存)
1）启用DOM缓存功能
DOM缓存可以将所有页面都加载、缓存起来，然后在dom中就可以直接通过名字、id等选择器来操作页面了。
var mainView = myApp.addView(‘.view-main‘, { domCache: true //启用dom缓存 });
2）在index.html中加载所有页面（page被加载到view容器中，加了 cached类 的page被缓存，不加的被渲染呈现）
<html> <head>...</head> <body> ... <!-- Views --> <div class="views"> <!-- View --> <div class="view view-main"> <!-- Pages --> <div class="pages"> <!-- Home page --> <div class="page" data-page="index"> <div class="page-content"> <p>Home page</p> </div> </div> <!-- About page --> <div class="page cached" data-page="about"> <div class="page-content"> <p>About page</p> </div> </div> <!-- Services page --> <div class="page cached" data-page="services"> <div class="page-content"> <p>Services page</p> </div> </div> </div> </div> </div> ... </body> </html>
3）跳转至内联页面：通过 #pageName
<a href="#about">Go to About page</a>
4）返回上一页内联页面：加 back 类。
<a href="#index" class="back"> Go back to home page </a>
5）js中跳转至内联页面
view.router.load({pageName: ‘pageName‘});
五：模版文件的使用（略）
