贊助者成為贊助者
logo_applelogo_android
sun_max_fillmoon_fill

檢視 / 路由器

檢視 (<div class="view">) - 是應用程式中一個獨立的視覺部分，擁有自己的設定、導覽和記錄。因此，它在應用程式中是一種應用程式。這種功能讓您可以輕鬆地操作應用程式的每個部分。

檢視配置

讓我們看看檢視的 HTML 結構

<body>
  <!-- app root -->
  <div id="app">
    <!-- view inside of panel -->
    <div class="panel panel-left panel-cover">
      <div class="view panel-view"> ... </div>
    </div>
    <!-- Your main view -->
    <div class="view view-main">
      <!-- View related pages -->
      ...
    </div>
    <div class="popup">
      <div class="view popup-view"> ... </div>
    </div>
  </div>
</body>

如您所見，檢視幾乎可以位於應用程式的任何部分。

主檢視

您的主檢視應該有額外的view-main類別。為什麼我們需要主檢視？預設情況下，所有連結（不在任何已初始化的檢視中）將在主檢視中載入頁面。此外，如果您使用browserHistory雜湊導覽，則它只適用於主檢視的導覽。

多重檢視配置

如果我們的應用程式在應用程式根目錄中有多個檢視，即所謂的「標籤檢視」應用程式，我們必須使用額外的<div class="views">元素來包裝我們的檢視。

只允許一個「檢視」元素！

<body>
  <!-- app root -->
  <div id="app">
    <!-- view inside of panel -->
    <div class="panel panel-left panel-cover">
      <div class="view panel-view"> ... </div>
    </div>
    <!-- Views container -->
    <div class="views tabs">
      <!-- Your main view -->
      <div class="view view-main tab tab-active" id="view-1">
        <!-- View related pages -->
        ...
      </div>
      <!-- Another view -->
      <div class="view tab" id="view-2">
        <!-- View related pages -->
        ...
      </div>
      ...
    </div>
    <div class="popup">
      <div class="view popup-view"> ... </div>
    </div>
  </div>
</body>

檢視應用程式方法

當我們已經在 HTML 中有需要的檢視，而且我們的應用程式已經初始化，現在我們需要初始化我們的檢視。讓我們看看可用的應用程式方法來處理檢視

app.views.create(viewEl, parameters) - 初始化檢視

  • viewEl - 字串或HTMLElement。如果是字串 - 檢視元素的 CSS 選擇器
  • parameters - 物件。包含檢視參數的物件
  • 方法傳回物件，其中包含剛建立的檢視實例。

app.views.get(viewEl) - 透過 HTML 元素取得檢視實例

  • viewEl - 字串或HTMLElement。如果是字串 - 檢視元素的 CSS 選擇器
  • 方法傳回物件，其中包含剛建立的檢視實例。

可能會出現需要取得目前已啟用的檢視的情況，因為除了主應用程式檢視之外，我們也可能在開啟的快顯視窗、彈出視窗、開啟的面板、標籤等中檢視。這個方法允許取得目前已啟用/可見/「最上層」檢視的檢視實例。

例如，如果你在面板中初始化了 View，並且面板目前已開啟，則此方法將傳回面板的 View。或者，如果你使用具有標籤列配置的應用程式，其中每個標籤都是 View，則此方法將傳回目前活動/可見的標籤檢視

app.views.current - 取得目前活動/可見的 View 實例。

  • 方法傳回物件，其中包含剛建立的檢視實例。

檢視參數

現在讓我們看看建立 View 所需的可用參數清單

參數類型預設值說明
name字串檢視名稱。如果檢視是用名稱建立的，則可透過 app.views.[name] 存取。
main布林值false指定此檢視是否為主要檢視。如果未傳遞，則會根據其元素是否具有 view-main 類別來決定
router布林值true設為 false 以停用檢視路由器
initRouterOnTabShow布林值false如果啟用且檢視是標籤，則它不會初始化路由器並載入初始頁面，直到檢視標籤變為可見
url字串檢視的預設 (初始) url。如果未指定，則等於文件 url
loadInitialPage布林值true啟用時，且檢視內沒有子頁面。它將載入與初始 URL 相符的初始頁面
linksView字串
物件		已初始化檢視實例的另一個檢視或物件的 CSS 選擇器。預設情況下，已初始化 (僅) 檢視中的所有連結都將在此檢視中載入頁面。這會告訴連結在其他檢視中載入頁面。
allowDuplicateUrls布林值false你可以啟用此參數以允許載入與檢視中目前「活動」頁面具有相同 url 的新頁面。
animate布林值true啟用頁面之間的轉場
preloadPreviousPage布林值true在導覽中深入時，啟用/停用前一頁面的預載入。應啟用以正確執行「滑動返回頁面」功能。
reloadPages布林值false啟用時，檢視將永遠重新載入目前活動的頁面，而不會載入新的頁面
restoreScrollTopOnBack布林值true啟用時，當你回到此頁面時，它將還原頁面捲動頂端
iosPageLoadDelay數字0載入新頁面並插入到 DOM 中後，在轉場之前延遲 (以毫秒為單位)。可以稍微增加以提升效能。僅在 iOS 主題下有效
mdPageLoadDelay數字0載入新頁面並插入到 DOM 中後，在轉場之前延遲 (以毫秒為單位)。可以稍微增加以提升效能。僅在 MD 主題下有效
passRouteQueryToRequest布林值true啟用後，路由器會將路由 URL 查詢傳遞至要求 URL 查詢（針對 url 和 componentUrl 路由屬性）

如果您有下列路由

{ path: '/somepage/', url: 'http://myserver/page/' }

然後您會按一下具有 /somepage/?foo=bar URL 的連結，接著會從 http://myserver/page/?foo=bar URL 載入頁面

passRouteParamsToRequest布林值false啟用後，路由器會將目前的路由參數傳遞至要求 URL 查詢（針對 url 和 componentUrl 路由屬性）

如果您有下列路由

{ path: '/user/:userId/posts/:postId/', url: 'http://myserver/userpost/' }

然後您會按一下具有 /user/11/posts/12/ URL 的連結，接著會從 http://myserver/userpost/?userId=11&postId=12 URL 載入頁面

主從
masterDetailBreakpoint數字0啟用主從檢視的主應用程式最小寬度（具有 master: true 參數的路由）
masterDetailResizable布林值false

啟用可調整大小的主從配置

若要指定主從可調整大小的最小/最大寬度，需要在樣式中設定 page-master，例如

.view-master-detail .page-master {
  min-width: 200px;
  max-width: 80vw;
}
reloadDetail布林值false啟用後，在導覽時會重新載入每個詳細資料頁面
路由
routes陣列具有目前檢視 路由 的陣列。如果已指定，將覆寫全域應用程式路由，而且僅在此處指定的路由會提供給目前檢視
routesAdd陣列具有額外 路由 的陣列，將延伸全域應用程式路由。這些額外路由僅會提供給目前檢視
routesBeforeEnterfunction(context)

陣列		函式（或函式陣列），會在 每個 路由載入/輸入之前執行。若要繼續路由載入，必須呼叫 resolve。如果是 陣列，則陣列中的每個函式都必須解決才能繼續。

與 路由 beforeEnter 相同，但會適用於每個路由

routesBeforeLeavefunction(context)

陣列		函式（或函式陣列），會在 每個 路由卸載/離開之前執行。若要繼續導覽，必須呼叫 resolve。如果是 陣列，則陣列中的每個函式都必須解決才能繼續。

與 路由 beforeLeave 相同，但會適用於每個路由

移除元素
removeElements布林值true在頁面轉換期間，路由器可能會從 DOM 中移除未使用的頁面和導覽列元素。如果您想要手動處理元素移除，或使用其他函式庫（例如 Vue 或 React）處理，則可以停用此功能
removeElementsWithTimeout布林值false啟用後，路由器會在一段時間後移除元素
removeElementsTimeout數字0移除元素的逾時（在 removeElementsWithTimeout: true 的情況下）
unloadTabContent布林值true當分頁可見時卸載可路由分頁內容（移除分頁內部內容）。僅適用於可路由分頁
元件快取
componentCache布林值true啟用後，Router 會快取透過 componentUrl 指定的元件
XHR 快取
xhrCache布林值true由於 Router 可使用 Ajax 為頁面載入 HTML 內容，因此建議使用快取，特別是當這些頁面中的內容不太常更新時。
xhrCacheIgnore陣列[]不應快取的 URL 陣列（字串）
xhrCacheIgnoreGetParameters布林值false如果為「true」，則會將「about.html?id=2」和「about.html?id=3」等 URL 視為單一「about.html」頁面並進行快取。
xhrCacheDuration數字1000 * 60 * 10以毫秒 (ms) 為單位的期間，在此期間，應用程式會使用快取，而不是透過其他 Ajax 要求載入頁面。預設為 10 分鐘。
iOS 動態導覽列
iosDynamicNavbar布林值true為 iOS 主題啟用動態導覽列
iosAnimateNavbarBackIcon布林值true此選項（啟用時）可為動態導覽列左側返回連結圖示動畫提供更原生化的外觀。僅在您使用動態導覽列，且左側預設返回連結圖示設定為「滑動」時才有用。
向後滑動
iosSwipeBack布林值true啟用/停用從螢幕左側邊緣向後滑動以回到前一頁面的功能。適用於 iOS 主題
iosSwipeBackThreshold數字0以像素為單位的數值。如果「觸控距離」超過此數值，則會開始向後滑動動作。適用於 iOS 主題
iosSwipeBackActiveArea數字30以像素為單位的數值。觸發向後滑動動作的螢幕左側不可見邊緣寬度。適用於 iOS 主題
iosSwipeBackAnimateShadow布林值true在向後滑動動作期間啟用/停用方塊陰影動畫。您可以停用它以提升效能。適用於 iOS 主題
iosSwipeBackAnimateOpacity布林值true在向後滑動動作期間啟用/停用不透明度動畫。您可以停用它以提升效能。適用於 iOS 主題
mdSwipeBack布林值false啟用/停用從螢幕左側邊緣向後滑動以回到前一頁面的功能。適用於 MD 主題
mdSwipeBackThreshold數字0以像素為單位的數值。如果「觸控距離」超過此數值，則會開始向後滑動動作。適用於 MD 主題
mdSwipeBackActiveArea數字30以像素為單位的數值。觸發向後滑動動作的螢幕左側不可見邊緣寬度。適用於 MD 主題
mdSwipeBackAnimateShadow布林值true在滑動返回動作期間啟用/停用方塊陰影動畫。您可以停用它以改善效能。針對 MD 主題
mdSwipeBackAnimateOpacity布林值false在滑動返回動作期間啟用/停用不透明度動畫。您可以停用它以改善效能。針對 MD 主題
瀏覽器記錄
browserHistory布林值false如果您開發網路應用程式（不是 Cordova/Capacitor 或主畫面網路應用程式），啟用雜湊導覽很有用（瀏覽器網址看起來像「http://my-webapp.com/#!/about.html」）。使用者也能夠透過使用瀏覽器的預設返回和前進按鈕瀏覽應用程式的記錄。
browserHistoryRoot字串瀏覽器記錄根 URL 分隔符號，例如「http://my-app.com/」。只有在您使用空的（「」）browserHistorySeparator 時才有用
browserHistoryAnimate布林值true在瀏覽器記錄變更時啟用/停用頁面轉場
browserHistoryAnimateOnLoad布林值false在應用程式載入時啟用/停用瀏覽器記錄頁面轉場
browserHistorySeparator字串#!瀏覽器記錄 URL 分隔符號，可以變更為類似「#page/」，然後您的瀏覽器記錄網址看起來像「http://myapp.com/#page/about.html」
browserHistoryOnLoad布林值true停用以忽略解析瀏覽器記錄 URL 和在應用程式載入時載入頁面
browserHistoryInitialMatch布林值false當您的伺服器設定為回應與請求的 URL 相符的內容時，設為 true（例如使用伺服器端渲染架構，例如 Nuxt.js、Next.js 等）。在 Framework7-React/Vue/Svelte 中使用時也必須啟用。預設為停用
browserHistoryStoreHistory布林值true啟用時（預設），它會將路由記錄儲存在 localStorage 中，並嘗試在下次網路應用程式拜訪時還原它
browserHistoryTabs字串取代可以是 取代 或 推入。當為「取代」（預設）時，它會在可路由標籤變更時取代狀態，否則（如果為「推入」），它會將每個可路由標籤變更新增到記錄中，因此可以使用瀏覽器返回按鈕在標籤之間切換
事件處理常式
on物件

包含事件處理常式的物件。例如

var view = app.views.create('.view-main', {
  on: {
    pageInit: function () {
      console.log('page init')
    }
  }
})

請注意，所有下列參數都可以在 view 屬性下的全域應用程式參數中使用，以設定所有檢視的預設值。例如

var app = new Framework7({
  view: {
    iosDynamicNavbar: false,
    xhrCache: false,
  }
});

檢視方法和屬性

因此，要建立檢視，我們必須呼叫

var view = app.views.create({ /* parameters */ })

之後，我們有它的初始化實例（例如上面範例中的 view 變數），其中包含有用的方法和屬性

屬性
view.app連結到全域應用程式實例
view.el檢視 HTML 元素
view.$el包含檢視 HTML 元素的 Dom7 實例
view.name傳遞 name 參數的檢視名稱
view.main布林值屬性，表示是否為主視圖
view.routes包含可用路由器的路由的陣列
view.history包含視圖歷史記錄的陣列
view.params包含視圖初始化參數的物件
view.router視圖初始化的路由器實例
方法
view.destroy()銷毀視圖實例
view.on(event, handler)新增事件處理常式
view.once(event, handler)新增事件處理常式，在觸發後會移除
view.off(event, handler)移除事件處理常式
view.off(event)移除指定事件的所有處理常式
view.emit(event, ...args)在實例上觸發事件

視圖事件

視圖會在視圖元素上觸發下列 DOM 事件，以及在應用程式和視圖實例上觸發事件

視圖 DOM 事件

事件目標說明
view:init視圖元素<div class="view">事件會在視圖初始化時觸發
view:resize視圖元素<div class="view">事件會在主從視圖調整大小時觸發（當啟用 masterDetailResizable 時）

視圖實例事件

視圖實例會在自身實例和應用程式實例上發出事件。應用程式實例事件有相同的名稱，但前面加上 view 字首。

事件目標參數說明
initview(view)事件會在視圖初始化時觸發
viewInitapp
resizeview(view, width)事件會在主從視圖調整大小時觸發（當啟用 masterDetailResizable 時）
viewResizeapp

路由器 API/方法和屬性

視圖的主要目的是在頁面之間導航/路由。我們可以使用 view.router 存取其路由器實例。它有許多有用的方法和屬性，可控制路由和導航

路由器屬性
router.app連結到全域應用程式實例
router.view連結到相關的視圖實例
router.params包含路由器初始化參數的物件
router.el路由器的視圖 HTML 元素
router.$el包含路由器的視圖 HTML 元素的 Dom7 實例
router.currentPageEl目前的頁面 HTML 元素
router.routes包含可用路由器的路由的陣列
router.history包含路由器的視圖歷史記錄的陣列
router.cache包含路由器/視圖快取資料的物件
router.currentRoute包含目前路由資料的物件。它有下列屬性
  • url - 路由 URL
  • path - 路由路徑
  • query - 包含路由查詢的物件。如果網址為 /page/?id=5&foo=bar，則會包含下列物件 {id: '5', foo: 'bar'}
  • params - 路由參數。如果我們有符合 /page/user/:userId/post/:postId/ 路徑的路由，且頁面網址為 /page/user/55/post/12/，則會是下列物件 {userId: '55', postId: '12'}
  • name - 路由名稱
  • hash - 路由 URL hash
  • route - 包含可用路由中相符路由的物件
  • context - 傳遞至路由的內容
router.previousRoute包含先前已啟用路由資料的物件。物件格式與 currentRoute 相同
router.allowPageChange布林值屬性，表示是否允許變更頁面/導覽
路由方法
router.navigate(url, options)導覽至（載入）新頁面
  • url - 字串 - 要導覽的網址
  • options - 物件，包含其他導覽屬性（選用）
    • reloadCurrent (布林值) - 使用路由中的新頁面取代目前頁面，此情況下不會有動畫
    • reloadPrevious (布林值) - 使用路由中的新頁面取代歷史記錄中的前一頁
    • reloadAll (布林值) - 載入新頁面，並從歷史記錄和 DOM 中移除所有前一頁
    • clearPreviousHistory (布林值) - 重新載入/導覽至指定路由後，會清除前一頁的歷史記錄
    • animate (布林值) - 是否要為頁面加入動畫（會覆寫路由預設設定）
    • history (布林值) - 是否要將頁面儲存在路由歷史記錄中
    • browserHistory (布林值) - 是否要將頁面儲存在瀏覽器狀態中。如果您使用 browserHistory，則可以在此傳遞 false，以防止路由進入瀏覽器歷史記錄
    • ignoreCache (布林值) - 如果設為 true，則會忽略快取中是否有此類 URL，並再次使用 XHR 重新載入
    • props (物件) - 會傳遞為頁面元件 props 的 props
    • transition (字串) - 路由 自訂頁面過場動畫名稱
    • openIn (字串) - 允許將頁面路由開啟為模態視窗或面板。因此，它可以是下列其中之一：popup、popover、loginScreen、sheet、panel
router.navigate(參數，選項)透過參數導航到（載入）新頁面。此方法允許透過路由的名稱導航到路由。
  • 參數 - 物件 - 包含路由名稱、查詢、參數的物件，用於導航。
  • 選項 - 物件，包含其他導航屬性（選用）。與前一個範例相同。

例如，如果我們有下列路由

{
  name: 'about',
  path: '/about/',
  ...
}

我們可以透過呼叫來導航到它

router.navigate({ name: 'about' });

如果具有包含參數的較複雜路由

{
  name: 'post',
  path: '/block/:userId/:postId',
  ...
}

則也必須傳遞參數

router.navigate({
  name: 'post',
  params: { userId: 1, postId: 2 },
});
router.back(網址，選項)返回前一頁，回到檢視歷程
  • 網址 - 字串 - 要導航到的網址（選用）。
    • 如果未指定，則會返回歷程中的前一頁。
    • 如果已指定，且歷程中還有前一頁，則會略過它。
    • 如果已指定，且有force: true選項，則會從 DOM 中移除前一頁，並導航回到指定的頁面網址
  • options - 物件，包含其他導覽屬性（選用）
    • animate (布林值) - 是否要為頁面加入動畫（會覆寫路由預設設定）
    • browserHistory (布林值) - 是否要將頁面儲存在瀏覽器狀態中。如果您使用 browserHistory，則可以在此傳遞 false，以防止路由進入瀏覽器歷史記錄
    • ignoreCache (布林值) - 如果設為 true，則會忽略快取中是否有此類 URL，並再次使用 XHR 重新載入
    • 強制 (布林值) - 如果設為true，則會略過歷程中的前一頁，並載入指定的頁面
router.refreshPage()重新整理/重新載入目前頁面。實際上與
router.navigate(router.currentRoute.url, {
  reloadCurrent: true,
  ignoreCache: true,
});
router.clearPreviousHistory()清除路由器前一頁面歷程，並從 DOM 中移除所有前一頁面
router.updateCurrentUrl(網址)更新目前路由網址，並根據傳遞的網址更新router.currentRoute屬性（查詢、參數、雜湊等）。此方法不會載入或重新載入任何內容。它只會變更目前的路由網址。
router.generateUrl({名稱, 查詢, 參數})

根據指定的路由名稱產生路由網址。例如，如果我們有下列路由

{
  name: 'blogPost',
  path: '/blog/post/:postId',
  ...
}

那麼我們可以取得路由的網址，如下所示

const url = router.generateUrl({
  name: 'blogPost',
  // only for route with required params
  params: { postId: 1234 },
  // optional query
  query: { foo: 'bar' }
});
console.log(url); /* /blog/post/1234?foo=bar */
router.on(事件, 處理常式)新增事件處理常式
router.once(事件, 處理常式)新增事件處理常式，在觸發後會移除
router.off(事件, 處理常式)移除事件處理常式
router.off(事件)移除指定事件的所有處理常式
router.emit(事件, ...引數)在實例上觸發事件

連結頁面和檢視

一直使用路由器方法在頁面之間導航可能會不太方便。在許多情況下，我們可以使用 連結 在頁面之間導航。我們可以使用 data- 屬性傳遞其他導航參數

<!-- same as router.navigate('/somepage/'); -->
<a href="/somepage/">Some Page</a>

<!-- same as router.navigate('/somepage/', {reloadCurrent: true, animate: false}); -->
<a href="/somepage/" data-animate="false" data-reload-current="true">Some Page</a>

<!-- same as router.back(); -->
<a href="#" class="back">Go back</a>

<!-- same as router.back('/home/', {force: true, ignoreCache: true}); -->
<a href="/home/" data-force="true" data-ignore-cache="true" class="back">Go back</a>

連結的預設行為

但是，如果我們需要在另一個檢視中載入頁面，我們可以在連結的 data-view 屬性中指定此檢視的 CSS 選擇器

<!-- left view -->
<div class="view view-init view-left" data-name="left">
  ...
  <!-- will load "some-page" to main view -->
  <a href="/some-page/" data-view=".view-main">Some Page</a>
  ...
</div>
<!-- main view -->
<div class="view view-init view-main">
  ...
  <!-- will load "another-page" to left view -->
  <a href="/another-page/" data-view=".view-left">Another Page</a>
  ...
</div>

如果我們需要在「目前」檢視（目前活動/可見的檢視實例）中載入頁面，我們需要設定 data-view="current" 屬性

<!-- will load "another-page" in current view -->
<a href="/another-page/" data-view="current">Another Page</a>

如果我們需要防止路由器處理特定連結，我們可以將 prevent-router 類別新增到此類連結

<!-- This link will be ignored by router -->
<a href="/some-page/" class="prevent-router">Some Page</a>

路由器事件

路由器有很多有用的事件。

路由器 DOM 事件

路由器會為滑動返回頁面觸發下列 DOM 事件

事件目標說明
swipeback:move視圖元素<div class="view">事件會在滑動返回移動期間觸發
swipeback:beforechange視圖元素<div class="view">當您放開時，事件會在滑動返回到前一頁面的動畫開始前觸發
swipeback:afterchange視圖元素<div class="view">當您放開時，事件會在滑動返回到前一頁面的動畫結束後觸發
swipeback:beforereset視圖元素<div class="view">當您放開時，事件會在滑動返回到目前頁面的動畫開始前觸發
swipeback:afterreset視圖元素<div class="view">當您放開時，事件會在滑動返回到目前頁面的動畫結束後觸發

路由器實例事件

路由器事件會傳遞到檢視實例和應用程式實例，因此路由器實例上發出的事件也會在檢視和應用程式實例上提供

事件參數說明
routeChange(newRoute, previousRoute, router)事件會在目前路線變更時觸發
routeChanged(newRoute, previousRoute, router)事件會在目前路線變更和頁面轉場後觸發
routeUrlUpdate(newRoute, router)當呼叫 router.updateCurrentUrl 方法時，事件會觸發
XHR 事件
routerAjaxStart(xhr, options)在路由 XHR 開啟後且在 XHR 傳送前會觸發事件。可用於在傳送 XHR 物件前修改它。使用此回呼來設定自訂標頭等。接收 XHR 物件和導覽的 選項 物件作為引數
routerAjaxSuccess(xhr, options)當要求成功時會觸發事件。接收 XHR 物件和導覽的 選項 物件作為引數
routerAjaxError(xhr, options)當要求失敗時會觸發事件。接收 XHR 物件和導覽的 選項 物件作為引數
routerAjaxComplete(xhr, options)當要求完成時會觸發事件。接收 XHR 物件和導覽的 選項 物件作為引數
向後滑動事件
swipebackMove(資料)在向後滑動期間會觸發事件。資料 包含具有下列屬性的物件：百分比、目前頁面元素、前一頁面元素、目前導覽列元素、前一導覽列元素
swipebackBeforeChange(資料)當您放開時，會在向後滑動動畫到前一頁面之前觸發事件。資料 包含具有下列屬性的物件：目前頁面元素、前一頁面元素、目前導覽列元素、前一導覽列元素
swipebackAfterChange(資料)當您放開時，會在向後滑動動畫到前一頁面之後觸發事件。資料 包含具有下列屬性的物件：目前頁面元素、前一頁面元素、目前導覽列元素、前一導覽列元素
swipebackBeforeReset(資料)當您放開時，會在向後滑動動畫到目前頁面之前觸發事件。資料 包含具有下列屬性的物件：目前頁面元素、前一頁面元素、目前導覽列元素、前一導覽列元素
swipebackAfterReset(資料)當您放開時，會在向後滑動動畫到目前頁面之後觸發事件。資料 包含具有下列屬性的物件：目前頁面元素、前一頁面元素、目前導覽列元素、前一導覽列元素
頁面事件
pageMounted(頁面資料)當新頁面剛插入 DOM 時會觸發事件。或當具有 keepAlive 路由的頁面已安裝/附加到 DOM 時。事件接收 頁面資料 作為引數
pageInit(頁面資料)當路由初始化所需頁面的元件和導覽列後會觸發事件。事件接收 頁面資料 作為引數
pageReinit(頁面資料)如果導覽到已初始化的頁面，會觸發此事件。事件接收 頁面資料 作為引數
pageBeforeIn(頁面資料)當所有內容已初始化且頁面已準備好轉換為檢視（轉換為活動/目前位置）時會觸發事件。事件接收 頁面資料 作為引數
pageAfterIn(頁面資料)當頁面轉換為檢視後會觸發事件。事件接收 頁面資料 作為引數
pageBeforeOut(頁面資料)事件會在頁面即將離開視線前觸發。事件會接收 頁面資料 作為參數
pageAfterOut(頁面資料)事件會在頁面離開視線後觸發。事件會接收 頁面資料 作為參數
pageBeforeUnmount(頁面資料)事件會在具有 keepAlive 路由的頁面即將解除安裝/與 DOM 分離時觸發。事件會接收 頁面資料 作為參數
pageBeforeRemove(頁面資料)事件會在頁面即將從 DOM 中移除前觸發。如果你需要分離一些事件/摧毀一些外掛程式以釋放記憶體，這個事件會非常有用。事件會接收 頁面資料 作為參數。對於 keepAlive 路由，不會觸發這個事件。
可路由標籤事件
tabInit
tabMounted		(newTabEl, tabRoute)事件會在可路由標籤內容載入後立即觸發。事件處理常式會接收以下參數作為參數
  • newTabEl - 剛載入路由內容的標籤 HTML 元素（新標籤）
  • tabRoute - 新標籤路由
tabBeforeRemove(oldTabEl, newTabEl, tabRoute)事件會在可路由標籤內容載入後立即觸發。事件處理常式會接收以下參數作為參數
  • oldTabEl - 剛移除路由內容的標籤 HTML 元素（舊標籤）
  • newTabEl - 剛載入路由內容的標籤 HTML 元素（新標籤）
  • tabRoute - 新標籤路由
可路由對話框事件
modalInit
modalMounted		(modalEl, modalRoute, modal)事件會在可路由對話框內容載入並新增至 DOM 後立即觸發。事件處理常式會接收以下參數作為參數
  • modalEl - 已載入的對話框 HTML 元素
  • modalRoute - 對話框路由
  • modal - 已建立的對話框實例
modalBeforeRemove(modalEl, modalRoute, modal)事件會在可路由對話框即將從 DOM 中移除並摧毀前觸發。事件處理常式會接收以下參數作為參數
  • modalEl - 對話框 HTML 元素
  • modalRoute - 對話框路由
  • modal - 對話框實例

檢視自動初始化

如果你不需要使用檢視 API，而且你的檢視在應用程式初始化時位於 DOM 內，那麼只要新增 view-init 類別即可自動初始化

<!-- Add view-init class -->
<div class="view view-init">
  ...
</div>

但是檢視參數呢？在這種情況下，我們可以在 data- 屬性中傳遞它們。

在 camelCase 中使用的參數，例如 browserHistory，在 data- 屬性中應使用 kebab-case，例如 data-browser-history

<!-- view parameters in data- attributes -->
<div class="view view-init" data-url="/" data-name="home" data-browser-history="true">
  ...
</div>

在這種情況下，如果你需要存取已建立的檢視執行個體，你可以使用

<!-- main view -->
<div class="view view-main view-init">
  ...
</div>

<!-- another view -->
<div class="view view-init" data-name="home">
  ...
</div>
var mainView = app.views.main;
var homeView = app.views.home;

初始頁面路由

初始頁面也可以使用 路由 正確載入。在應用程式配置中，我們必須將檢視留空

<body>
  <div id="app">
    <div class="view view-main"></div>
  </div>
</body>

在路由中，我們可以指定「首頁」路由，例如

routes: [
  {
    path: '/',
    url: './home.html'
  },
  ...
]

當我們初始化檢視時，我們需要指定它是預設 URL

app.views.create('.view-main', {
  url: '/'
})

這樣就完成了，現在在應用程式載入時，首頁內容將從「home.html」檔案載入。

主從

主從模式通常用於夠寬的螢幕和平板電腦，並且包含兩個檢視

當在窄螢幕上摺疊時，這些頁面之間的導覽會像一般的路由一樣。

導覽到/從主從檢視時不會有轉場。

當主頁面載入時，所有其他頁面將會載入為從頁面。建議使用 reloadAll 導覽參數來「導覽離開」主從檢視。

要啟用主從檢視

當主從檢視已啟用時，你可以使用下列額外的類別進行自訂樣式設定

例如

const mainView = app.views.create('.view-main', {
  // enable master detail
  masterDetailBreakpoint: 800,
  routes: [
    {
      path: '/',
      url: './pages/master.html',
      // specify home route as master route
      master: true,
      // detail routes
      detailRoutes: [
        {
          path: '/detail/:id/',
          url: './pages/detail.html',
        },
      ]
    },
  ]
});

我們應該要有以下類似內容

自訂頁面轉場

除了預設主題特定的頁面轉場外，我們還可以建立自訂頁面轉場，或使用其他轉場效果。

內建下列自訂頁面轉場

  • f7-circle
  • f7-cover
  • f7-cover-v
  • f7-dive
  • f7-fade
  • f7-flip
  • f7-parallax
  • f7-push

若要在特定路由上使用此類轉場，我們需要在路由選項中指定。

routes = [
  ...
  {
    path: '/some-page/',
    url: '...',
    options: {
      transition: 'f7-circle',
    },
  },
  ...
]

若要載入具有自訂轉場的現有路由，我們需要在router.navigate()方法中傳遞。

// load /some-page/ with "f7-cover" transition
router.navigate('/some-page/', { transition: 'f7-cover' })

或者，我們可以直接透過data-transition屬性在連結上指定（就像其他路由選項一樣）。

<!-- load /some-page/ with "f7-cover" transition -->
<a href="/some-page/" data-transition="f7-cover">...</a>

除了內建轉場外，我們還可以建立自訂轉場。這可以使用 CSS 動畫來完成。

當我們指定自訂頁面轉場時，路由器會將下列類別新增到其元素（<div class="view">）

  • router-transition-[name]-forward - 導覽到新頁面時
  • router-transition-[name]-backward - 導覽到前一頁面時（返回）

而且，它會在導覽前進時等待page-next上的animationend事件，以及返回時等待page-current上的animationend事件。

因此，如果我們將自訂轉場命名為my-transition，則可以透過以下方式指定

.router-transition-my-transition-forward,
.router-transition-my-transition-backward {
  /* Apply some styles for view element when custom transition is running */
}
.router-transition-my-transition-forward .page-current {
  /* Animation when current page transforms to previous page */
  animation: my-transition-current-to-prev 400ms;
}
.router-transition-my-transition-forward .page-next {
  /* Animation when next page transforms to current page (new page comes into view) */
  animation: my-transition-next-to-current 400ms;
}
.router-transition-my-transition-backward .page-current {
  /* Animation when current page transforms to next page (going back) */
  animation: my-transition-current-to-next 400ms;
}
.router-transition-my-transition-backward .page-previous {
  /* Animation when previous page transforms to current page (previous page comes into view) */
  animation: my-transition-prev-to-current 400ms;
}

/* Specify animations */
@keyframes my-transition-current-to-prev {
  /* ... */
}
@keyframes my-transition-next-to-current {
  /* ... */
}
@keyframes my-transition-current-to-next {
  /* ... */
}
@keyframes my-transition-prev-to-current {
  /* ... */
}

例如，內建f7-cover轉場的指定方式如下

.router-transition-f7-cover-forward,
.router-transition-f7-cover-backward {
  background: #000;
  perspective: 1200px;
}
.router-transition-f7-cover-forward .page-next {
  animation: f7-cover-next-to-current 450ms forwards;
}
.router-transition-f7-cover-forward .page-current {
  animation: f7-cover-current-to-prev 450ms forwards;
}
.router-transition-f7-cover-backward .page-current {
  animation: f7-cover-current-to-next 450ms forwards;
}
.router-transition-f7-cover-backward .page-previous {
  animation: f7-cover-prev-to-current 450ms forwards;
}
@keyframes f7-cover-next-to-current {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes f7-cover-current-to-next {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes f7-cover-current-to-prev {
  from {
    transform: translateZ(0);
    opacity: 1;
  }
  to {
    transform: translateZ(-300px);
    opacity: 0.5;
  }
}
@keyframes f7-cover-prev-to-current {
  from {
    transform: translateZ(-300px);
    opacity: 0.5;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}
改善此文件
在此頁面上