我们有了一个有View和Page的应用结构，现在我们需要理解如何创建新的Page，以及Framework7是如何加载他们的。
下面有两个重要的地方请注意：
所以我们如果需要创建一个链接指向 about.html，我们只需要按照平时一样写 <a>标签就可以：
<a href="about.html">Go to About page</a>当我们点击这个链接的时候，Framework7会通过Ajax获取 about.html，解析它的内容，然后把它插入到DOM中，并且做一个动画切换到这个新页面。
因为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结构。当然这不是强制的，你可以写出完整的页面结构。
下面有一个复杂一点的情况。比如，我们有两个 初始化的View。在我们的index文件中：
<body>
...
<!-- Views -->
<div class="views">
<!-- Left view -->
<div class="view view-main left-view">
<!-- Navbar-->
<!-- Pages -->
<a href="about.html"> About </a>
<!-- Toolbar-->
</div>
<!-- Right view -->
<div class="view right-view">
<!-- Navbar-->
<!-- Pages -->
<a href="about.html"> About </a>
<!-- Toolbar-->
</div>
</div>
...
</body>如上例所示，我们有两个View，并且她们都有一个链接指向 about.html。并且，我们希望在不同的 View 中跳转到 about.html 页面时显示的是不同的内容。
我们看看这种情况下 about.html 应该是什么样的：
<!-- Left view -->
<div class="view view-main left-view">
<div class="page" data-page="about-right">
... This page will be loaded when you click about.html link from Left view ...
</div>
</div>
<!-- Right view -->
<div class="view right-view">
<div class="page" data-page="about-right">
... This page will be loaded when you click about.html link from Right view ...
</div>
</div>最关键的地方是，在 about.html 中的两个view应该和主页中的view有相同的class。这样Framework7就知道应该哪一个page应该放在哪一个view中。
在导航栏和工具栏布局类型中，你会看到动态导航栏需要 through-type 布局。但是这种布局类型的工具栏不在Page中，所以我们需要放在放在 about.html 中的正确位置：
<!-- Left view -->
<div class="view view-main left-view">
<div class="page" data-page="about-right">
... This page will be loaded when you click about.html link from Left view ...
</div>
</div>
<!-- Right view -->
<div class="view right-view">
<div class="page" data-page="about-right">
... This page will be loaded when you click about.html link from Right view ...
</div>
</div> The main point here is that page for speific View should be wrapped with <div class="view"> with the same classes as in main layout. It will help Framework7 to recognize which page is for which view.
Such structure is supported only in iOS Theme
As you may see in Nabvar & Toolbar layout types dynamic navbar requires through-type layout. But in this layout type navbar is not inside of page. So here is where we need to put it in about.html file:
<div class="navbar">
... Navbar content goes here
</div>
<div class="page" data-page="about">
... About page content goes here
</div>The point is that we just need to put navbar with is content near with page. And if you need to have here fiew pages with different navbars, just wrap them both (page and navbar) with appropriate views like in previous example.
Ok, we already know how to load pages, but how can we get back to the previous page with reverse transition.
It is actually super easy, all we need is just to add back class to link. Here is the structure of about.html page with back link to home index.html page:
<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 属性不是必须得，但是为了向下兼容，最好还是写上。
This feature is available only in iOS Theme
如果你启用了 "swipeBackPage" 应用参数，那么你可以通过从左向右滑动来后退到上一个页面。但是有时候你会想在某些页面中禁用这个行为，这种情况下你只需要加一个 no-swipeback class 即可。
<div class="page no-swipeback">
...
</div>有时候你在加载页面或者后退的时候需要立刻执行，不想要一个切换的动画效果，可以通过增加一个 "no-animation" class 在链接上即可。
<div class="page" data-page="about">
<-- Add additional "no-anmation" class to link to diable 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。
<div class="page" data-page="about">
<!-- Add additional "with-anmation" class to link to enable animated page transition -->
<a href="about.html" class="with-animation"> Load About page with animation </a>
<!-- The same rule for back link -->
<a href="index.html" class="back with-animation"> Go back with animation </a>
</div>有时候我们希望在某些链接上有更多的配置，我们可以使用作为 data-属性来配置所有在 视图链接方法中的参数，比如：
<!-- Refresh currently active page (reload from server) -->
<a href="about.html" data-reload="true" data-ignore-cache="true">Refresh page</a>
<!-- Go back but to another page, not to actual previous page in history. Such method also allows to jump back in history: -->
<a href="about.html" class="back" data-force="true">Back to About</a>
<!-- Load new page without animation -->
<a href="about.html" data-animate-pages="false"></a> Note that such attributes should be used in hypens-case instead of camelCase:
It is possible to load page from HTML files using JavaScript API, not only using <a> tags. For this case we may use .router.loadPage(url) View Navigation Methods:
// Initialize App
var myApp = new Framework7();
// Initialize View
var mainView = myApp.addView('.view-main')
// Load page from about.html file to main View:
mainView.router.loadPage('about.html');Note, that it is only possible for Views that were initialized
You can also get the same as when you click "back" link but with JavaScript using .router.back() View Navigation Methods:
// Initialize App
var myApp = new Framework7();
// Initialize View
var mainView = myApp.addView('.view-main')
// Go back on main View
mainView.router.back();前提是View必须已经初始化完成。
Framework7 中，页面之间的链接和路由都是很简单的，你只需要记住：
你需要使用普通的 <a> 标签，她有一个href属性指向你需要加载的页面。
通过ajax加载的页面不需要有完整的HTML结构。只需要有 <div class="page"> (和 <div class="navbar"> 如果你需要动态的滚动条)
如果你在同一个文件中有多个Page，把他们用 <div class="view"> 包裹起来，并且给每一个View设置好正确的class。
只需给一个链接加上 back class (<a href="index.html" class="back">)，她就会自动变成一个后退链接。
让我们看看如果做 View 间的链接