很多應用由多個頁面組成，不同的頁面承擔著不一樣的功能。比如，從音樂列表頁面點選歌曲，跳轉到該歌曲的播放介面。開發者需要通過頁面路由將這些頁面串聯起來。

在 js -> default -> pages 下右鍵新建一個 JS Page，這個新的頁面取名為 detail。

新建完成之後，config.json 檔案就會多出一項內容：

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
  "name": "default",
  "window": {
    "designWidth": 720,
    "autoDesignWidth": true
  }
},
 

index 頁面放置一個按鈕，點選之後會跳轉到 detail 頁面。detail 頁面也有一個按鈕，用於返回上一個頁面。

<!-- index.hml -->
<div class="container">
    <text>This is index page.</text>
    <button type="capsule" @click="router">route into detail</button>
</div>

<!-- detail.hml -->
<div class="container">
    <text>This is detail page.</text>
    <button type="capsule" @click="back">back into index page</button>
</div>
 

現在，最重要的是 js 部分，js 需要匯入一個模組，@system.router：

// index.js
import router from '@system.router'

export default {
    router() {
        router.push({
            uri: 'pages/detail/detail'
        })
    }
}

router.push()，接收一個物件，物件屬性 uri 就是要跳轉的頁面路徑。

接著，需要為 detail 頁面新增一個返回的路由：

// detail.js
import router from '@system.router'

export default {
    back() {
        router.back()
    }
}
 

點選 View -> Tool Windows -> Previewer，讓我們來預覽一下最終的效果：