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">)，她就會自動變成一個后退鏈接。
