页面路由

接口声明

无需声明

导入模块

import router from '@blueos.app.appmanager.router' 或 const router = require('@blueos.app.appmanager.router')

最小可运行示例

下面是一个可直接运行的双页面示例：首页跳转到详情页并传参，详情页读取参数并返回。页面路由无需在 features 中声明，但每个页面都必须注册到 manifest.json 的 router 中。

manifest.json（仅列出路由相关字段）

{
  "router": {
    "entry": "Home",
    "pages": {
      "Home": { "component": "index" },
      "Detail": { "component": "index" }
    }
  }
}

首页 src/pages/Home/index.ux

<script>
  import router from '@blueos.app.appmanager.router'

  export default {
    data: {},
    openDetail() {
      router.push({
        uri: '/Detail',
        params: { id: '1001' },
      })
    },
  }
</script>

<template>
  <div class="flex flex-col items-center justify-center w-full h-full">
    <text class="text-white text-3xl">首页</text>
    <input class="text-white mt-20" type="button" value="打开详情页" onclick="openDetail" />
  </div>
</template>

<style>
@tailwind utilities;
</style>

详情页 src/pages/Detail/index.ux

<script>
  import router from '@blueos.app.appmanager.router'

  export default {
    data: {
      id: '',
    },
    goBack() {
      router.back()
    },
  }
</script>

<template>
  <div class="flex flex-col items-center justify-center w-full h-full">
    <text class="text-white text-3xl">详情页</text>
    <text class="text-white text-2xl mt-20">接收到的 id：{{ id }}</text>
    <input class="text-white mt-20" type="button" value="返回上一页" onclick="goBack" />
  </div>
</template>

<style>
@tailwind utilities;
</style>

路由参数会挂载到目标页面实例上（如 this.id），值统一转换为字符串类型。要在模板中显示参数，需要在目标页面的 data 中声明同名字段。

接口定义

router.push(OBJECT)

跳转到应用内的某个页面。

参数：

参数	类型	必填	说明
uri	String	是	要跳转到的 uri，可以是下面的格式： 1. 以”/“开头的应用内页面的路径；例：/about。 2. 以非”/“开头的应用内页面的名称；例：About。 3. 特殊的，如果 uri 的值是”/“，则跳转到 path 为”/“的页，没有则跳转到首页
params	Object	否	跳转时需要传递的数据；跳转到蓝河应用页面时，参数可以在目标页面中通过this.param1的方式使用，param1 为 json 中的参数名，param1 对应的值会统一转换为 String 类型。
transition	Object	否	设置当前跳转的转场动画，优先级高于 router.setTransition

transition 参数说明

属性	类型	必填	说明
forward	Object	否	路由进入页面时的动效
back	Object	否	路由返回页面时的动效

forward、back 参数说明

属性	类型	必填	说明
exit	TransitionAnimation	否	即将退出的页面动画
enter	TransitionAnimation	否	即将出现的页面动画

示例：

• 应用内切换页面

  • path 切换

    router.push({
      uri: '/about',
      params: {
        testId: '1',
      },
    })

  • name 切换

    // open page by name
    router.push({
      uri: 'About',
      params: {
        testId: '1',
      },
    })

• 打开另一个应用

  • 指定 deeplink 打开

    router.push({
      uri: 'hap://app/com.vivo.bind/pages/bindmain?key=value',
    })

router.replace(OBJECT)

跳转到应用内的某个页面，当前页面无法返回

参数：

参数	类型	必填	说明
uri	String	是	要跳转到的 uri，可以是下面的格式： 1. 以”/“开头的应用内页面的路径；例：/about。 2. 以非”/“开头的应用内页面的名称;例：About。 3. 特殊的，如果 uri 的值是”/“，则跳转到 path 为”/“的页，没有则跳转到首页
params	Object	否	跳转时需要传递的数据，参数可以在目标页面中通过this.param1的方式使用，param1 为 json 中的参数名，param1 对应的值会统一转换为 String 类型。

示例：

router.replace({
  uri: '/test',
  params: {
    testId: '1',
  },
})

router.back()

返回上一页面

示例：

// A页面，open page by name
router.push({
  uri: 'B',
})
// B页面，open page by name
router.push({
  uri: 'C',
})
// C页面，open page by name
router.push({
  uri: 'D',
})
// D页面，open page by name
router.push({
  uri: 'E',
})
// E页面返回至D页面
router.back()
// D页面返回至C页面
router.back()

router.clear()

清空所有历史页面记录，仅保留当前页面（即保留栈顶页面）

参数：

无

示例：

router.clear()

router.getState()

获取当前页面状态

返回参数：

参数名	类型	说明
index	Number	当前页面在页面栈中的位置
name	String	当前页面的名称
path	String	当前页面的路径

示例：

const page = router.getState()
console.log(`page index = ${page.index}`)
console.log(`page name = ${page.name}`)
console.log(`page path = ${page.path}`)

router.setTransition(OBJECT)

设置应用默认转场动画

参数：

属性	类型	必填	说明
forward	Object	否	路由进入页面时的动效
back	Object	否	路由返回页面时的动效

forward、back 参数说明：

属性	类型	必填	说明
exit	TransitionAnimation	否	即将退出的页面动画
enter	TransitionAnimation	否	即将出现的页面动画

示例：

router.setTransition({
  forward: {
    enter: 'fadeIn',
    exit: 'fadeOut',
  },
  back: {
    enter: 'fadeIn',
    exit: 'fadeOut',
  },
})

TransitionAnimation

支持别名内置动画

动效别名表

系统提供内置动画，类型为 String。

别名	适用情况	描述
slideInLeft	打开页面	左侧滑入
slideOutRight	关闭页面	右侧滑出
fadeIn	打开页面	淡入
fadeOut	关闭页面	淡出
none	打开/关闭页面	无动效，瞬间显示/瞬间隐藏
zoomIn	打开/关闭页面	放大
zoomOut	打开/关闭页面	缩小