優維低程式碼:Route Alias 路由別名和Segues 頁面切換

語言: CN / TW / HK

優維低程式碼技術專欄,是一個全新的、技術為主的專欄,由優維技術委員會成員執筆,基於優維7年低程式碼技術研發及運維成果,主要介紹低程式碼相關的技術原理及架構邏輯,目的是給廣大運維人提供一個技術交流與學習的平臺。

連載第二十二期

《高階指引:Route Alias 路由別名和Segues 頁面切換》

Route Alias 路由別名

在路由定義中,可以通過 alias 欄位宣告該路由的別名,該別名可以承擔路由 ID 的作用。可以通過它來簡化路由跳轉的編排。

# 示例

可以在構件事件中跳轉:

bricks:
  - brick: your.awesome-brick
    events:
      item.click
        action: "alias.push"
        args:
          - your-alias
          - id: ${EVENT.detail.itemId}

也可以在構件屬性中使用求值佔位符獲取別名對應的 URL:

bricks:
  - brick: your.another-brick
    properties:
      useBrick:
        brick: your.item-brick
        transform:
          url: "<% ALIAS.getUrl('your-alias', { id: DATA.itemId }) %>"

Alias 別名在路由跳轉中和 Segues 很像,區別是不需要額外定義 segues。

在事件處理配置中,可以使用內建處理器 alias.push / alias.replace 實現頁面跳轉,更多資訊請參見 內建處理器:alias.*。

在求值佔位符中,可以呼叫 ALIAS.getUrl(alias, pathParams, query) 得到目標頁面地址,該函式接收的引數列表和 alias.push 一致,請參考 內建處理器:alias.*。

Segues 頁面切換

在 Storyboard 的路由定義中,可以通過 segues 欄位宣告該路由下的頁面切換配置。Segues 配置可以用於組織檢視之間的訪問關係,在 next-builder 中可以在 Routes Graph 頁面顯示該關係。

# 示例

如上圖:

  • 紅色方框內容為 Segues 的定義;
  • 黃色方框內容為 Segues 的使用方法一:事件;
  • 綠色線條內容為 Segues 的使用方法二:求值佔位符。

segues 的定義是一個字典,鍵名為該 segue 的 ID,值為一個 target 設定為跳轉目標路由的 alias。上圖紅色方框內容表示:為路由 example-list 定義了一個 ID 為 go-to-detail 的 segue,該 segue 跳轉目標為 alias 等於 example-detail 的路由。

Segues 定義僅用於該路由頁面或其子路由頁面,因此 Segue ID 在該路由內保持唯一性就可以。而跳轉目標 target 指向的 alias 是對整個 Micro App 的,因此 alias 應保障在 Micro App 內唯一,否則 Segue 的跳轉目標將無法確定。

在事件處理配置中,可以使用內建處理器 segue.push / segue.replace 實現頁面跳轉,更多資訊請參見 內建處理器:segue.*。

在求值佔位符中,可以呼叫 SEGUE.getUrl(segueId, pathParams, query) 得到目標頁面地址,該函式接收的引數列表和 segue.push 一致,請參考 內建處理器:segue.*。

注意:Segue ID 僅用於定義了該 Segue 的路由及其子路由下的頁面引用,在其定義所在的路由以外的頁面無法引用。

有疑問加站長微信聯絡(非本文作者)