鴻蒙OS 頁面路由

很多應(yīng)用由多個頁面組成，比如用戶可以從音樂列表頁面點擊歌曲，跳轉(zhuǎn)到該歌曲的播放界面。開發(fā)者需要通過頁面路由將這些頁面串聯(lián)起來，按需實現(xiàn)跳轉(zhuǎn)。

頁面路由 router 根據(jù)頁面的 uri 來找到目標頁面，從而實現(xiàn)跳轉(zhuǎn)。以最基礎(chǔ)的兩個頁面之間的跳轉(zhuǎn)為例，具體實現(xiàn)步驟如下：

1. 創(chuàng)建兩個頁面。
2. 修改配置文件 config.json。
3. 調(diào)用 router.push() 路由到詳情頁。
4. 調(diào)用 router.back() 回到首頁。

創(chuàng)建兩個頁面

創(chuàng)建 index 和 detail 頁面，這兩個頁面均包含一個 text 組件和 button 組件：text 組件用來指明當前頁面，button 組件用來實現(xiàn)兩個頁面之間的相互跳轉(zhuǎn)。hml 文件代碼示例如下：

<!-- index.hml -->
<div class="container">
  <div class="text-div">
    <text class="title">This is the index page.</text>
  </div>
  <div class="button-div">  
    <button type="capsule" value="Go to the second page" onclick="launch"></button>
  </div>
</div>

<!-- detail.hml -->
<div class="container">
  <div class="text-div">
    <text class="title">This is the detail page.</text>
  </div>
  <div class="button-div">  
    <button type="capsule" value="Go back" onclick="launch"></button>
  </div>
</div>

修改配置文件

config.json 文件是配置文件，主要包含了 JS FA 頁面路由信息。開發(fā)者新創(chuàng)建的頁面都要在配置文件的pages 標簽中進行注冊，處于第一位的頁面為首頁，即點擊圖標后的主頁面。

{
...
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
...
}

實現(xiàn)跳轉(zhuǎn)

為了使 button 組件的 launch 方法生效，需要在頁面的 js 文件中實現(xiàn)跳轉(zhuǎn)邏輯。調(diào)用 router.push() 接口將 uri 指定的頁面添加到路由棧中，即跳轉(zhuǎn)到 uri 指定的頁面。在調(diào)用 router 方法之前，需要導(dǎo)入 router 模塊。代碼示例如下：

// index.js
import router from '@system.router';
export default {
  launch: function() {
    router.push ({
      uri: 'pages/detail/detail',
    });
  },
}

// detail.js
import router from '@system.router';
export default {
  launch: function() {
    router.back();
  },
}

運行效果如下圖所示：

圖1 頁面路由效果