ArkUI 页面路由

很多应用由多个页面组成，不同的页面承担着不一样的功能。比如，从音乐列表页面点击歌曲，跳转到该歌曲的播放界面。开发者需要通过页面路由将这些页面串联起来。

在 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 部分，需要导入一个@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，预览最终效果：