Back to Uni App

Navigator

docs/component/navigator.md

2.3.311.5 KB
Original Source
<!-- ## navigator -->

::: sourceCode

GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-navigator

GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-navigator

:::

组件类型:UniNavigatorElement

页面链接

兼容性

Web微信小程序AndroidiOSHarmonyOSHarmonyOS(Vapor)
4.04.413.94.114.615.0

属性

名称类型默认值兼容性描述
targetstring-Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61; HarmonyOS(Vapor): -在哪个目标上发生跳转,默认当前应用
urlstring(string.PageURIString)-Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61; HarmonyOS(Vapor): 5.0当前应用内的跳转链接
open-typestring"navigate"Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61; HarmonyOS(Vapor): 5.0跳转方式
deltanumber-Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61; HarmonyOS(Vapor): 5.0当 open-type 为 navigateBack 时有效,表示回退的层数
app-idstring-Web: x; 微信小程序: 4.41; Android: x; iOS: x; HarmonyOS: x; HarmonyOS(Vapor): -当target="miniProgram"时有效,要打开的小程序 appId
pathstring-Web: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: x; HarmonyOS: x; HarmonyOS(Vapor): -当target="miniProgram"时有效,打开的页面路径,如果为空则打开首页
extra-dataobject-Web: x; 微信小程序: 4.41; Android: x; iOS: x; HarmonyOS: x; HarmonyOS(Vapor): -当target="miniProgram"时有效,需要传递给目标应用的数据,目标应用可在 App.onLaunch(),App.onShow() 中获取到这份数据
versionstring-Web: x; 微信小程序: 4.41; Android: x; iOS: x; HarmonyOS: x; HarmonyOS(Vapor): -当target="miniProgram"时有效,要打开的小程序版本,有效值 develop(开发版),trial(体验版),release(正式版),仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是体验版或正式版,则打开的小程序必定是正式版
animation-typestring"pop-in/out"Web: x; 微信小程序: x; Android: 4.18; iOS: 4.11; HarmonyOS: 4.61; HarmonyOS(Vapor): 5.0当 open-type="navigateTo" 或 open-type="navigateBack" 时有效,窗口的显示/关闭的动画类型。
animation-durationnumber300Web: 4.0; 微信小程序: x; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61; HarmonyOS(Vapor): 5.0当 open-type="navigateTo" 或 open-type="navigateBack" 时有效,窗口的显示/关闭动画的持续时间。
hover-classstring-Web: 4.41; 微信小程序: 4.41; Android: -; iOS: -; HarmonyOS: -; HarmonyOS(Vapor): -指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
hover-stop-propagationboolean-Web: 4.41; 微信小程序: 4.41; Android: -; iOS: -; HarmonyOS: -; HarmonyOS(Vapor): -指定是否阻止本节点的祖先节点出现点击态
hover-start-timenumber-Web: 4.41; 微信小程序: 4.41; Android: -; iOS: -; HarmonyOS: -; HarmonyOS(Vapor): -按住后多久出现点击态,单位毫秒
hover-stay-timenumber-Web: 4.41; 微信小程序: 4.41; Android: -; iOS: -; HarmonyOS: -; HarmonyOS(Vapor): -手指松开后点击态保留时间,单位毫秒
render-linkbooleantrueWeb: 4.0; 微信小程序: x; Android: x; iOS: x; HarmonyOS: x; HarmonyOS(Vapor): -是否给 navigator 组件加一层 a 标签控制 ssr 渲染
short-linkstring-Web: x; 微信小程序: 4.41; Android: x; iOS: x; HarmonyOS: x; HarmonyOS(Vapor): -(string)
target="miniProgram"时有效,当传递该参数后,可以不传 app-id 和 path。链接可以通过【小程序菜单】->【复制链接】获取。
@successstring-Web: 4.41; 微信小程序: 4.41; Android: -; iOS: -; HarmonyOS: -; HarmonyOS(Vapor): -(string)
target="miniProgram"open-type="navigate/navigateBack"时有效时有效,跳转小程序成功
@failstring-Web: 4.41; 微信小程序: 4.41; Android: -; iOS: -; HarmonyOS: -; HarmonyOS(Vapor): -(string)
target="miniProgram"open-type="navigate/navigateBack"时有效时有效,跳转小程序失败
@completestring-Web: 4.41; 微信小程序: 4.41; Android: -; iOS: -; HarmonyOS: -; HarmonyOS(Vapor): -(string)
target="miniProgram"open-type="navigate/navigateBack"时有效时有效,跳转小程序完成

target 的属性描述

合法值兼容性描述
selfWeb: -; 微信小程序: 4.41; Android: -; iOS: -; HarmonyOS: -; HarmonyOS(Vapor): -当前小程序
miniProgramWeb: -; 微信小程序: 4.41; Android: -; iOS: -; HarmonyOS: -; HarmonyOS(Vapor): -其它小程序

open-type 的属性描述

合法值兼容性描述
navigateWeb: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61; HarmonyOS(Vapor): 5.0对应 uni.navigateTo 或 navigateToMiniProgram 的功能
redirectWeb: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61; HarmonyOS(Vapor): 5.0对应 uni.redirectTo 的功能
switchTabWeb: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61; HarmonyOS(Vapor): 5.0对应 uni.switchTab 的功能
reLaunchWeb: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61; HarmonyOS(Vapor): 5.0对应 uni.reLaunch 的功能
navigateBackWeb: 4.0; 微信小程序: 4.41; Android: 3.9; iOS: 4.11; HarmonyOS: 4.61; HarmonyOS(Vapor): 5.0对应 uni.navigateBack 的功能
exitWeb: -; 微信小程序: 4.41; Android: -; iOS: -; HarmonyOS: -; HarmonyOS(Vapor): -退出小程序,target="miniProgram"时生效

version 的属性描述

合法值兼容性描述
developWeb: x; 微信小程序: 4.41; Android: x; iOS: x; HarmonyOS: x; HarmonyOS(Vapor): -开发版
trialWeb: x; 微信小程序: 4.41; Android: x; iOS: x; HarmonyOS: x; HarmonyOS(Vapor): -体验版
releaseWeb: x; 微信小程序: 4.41; Android: x; iOS: x; HarmonyOS: x; HarmonyOS(Vapor): -正式版,仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。

animation-type 的属性描述

合法值兼容性描述
auto-自动选择动画效果
none-无动画效果
slide-in-right-从右侧横向滑动效果
slide-in-left-左侧横向滑动效果
slide-in-top-从上侧竖向滑动效果
slide-in-bottom-从下侧竖向滑动效果
fade-in-从透明到不透明逐渐显示效果
zoom-out-从小到大逐渐放大显示效果
zoom-fade-out-从小到大逐渐放大并且从透明到不透明逐渐显示效果
pop-in-从右侧平移入栈动画效果
slide-out-right-横向向右侧滑出屏幕动画
slide-out-left-横向向左侧滑出屏幕动画
slide-out-top-竖向向上侧滑出屏幕动画
slide-out-bottom-竖向向下侧滑出屏幕动画
fade-out-从不透明到透明逐渐隐藏动画
zoom-in-从大逐渐缩小关闭动画
zoom-fade-in-从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画
pop-out-从右侧平移出栈动画效果
<!-- UTSCOMJSON.navigator.component_type-->

示例

示例为hello uni-app x alpha分支,与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见 ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/navigator/navigator

appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/navigator/navigator

示例

vue
<template>
  <page-head :title="title"></page-head>
  <view class="uni-padding-wrap uni-common-mt">
    <navigator id="navigate" class="navigator" url="navigate?title=navigate">
      <button type="default">跳转到新页面</button>
    </navigator>
    <navigator id="redirect" class="navigator" url="redirect?title=redirect" open-type="redirect">
      <button type="default">在当前页打开redirect</button>
    </navigator>
    <navigator id="switchTab" class="navigator" url="/pages/tabBar/template" open-type="switchTab">
      <button type="default">切换到模板选项卡switchTab</button>
    </navigator>
    <navigator id="reLaunch" class="navigator" url="/pages/tabBar/component" open-type="reLaunch">
      <button type="default">关闭所有页面回首页reLaunch</button>
    </navigator>
    <navigator id="reLaunch" class="navigator" open-type="navigateBack">
      <button type="default">返回上一页navigateBack</button>
    </navigator>
    <!-- <navigator id="reLaunch" class="navigator" open-type="exit">
      <button type="default">退出应用(仅Android和小程序生效)</button>
    </navigator> -->
    <navigator id="navigateToErrorPage" class="navigator" url="/pages/error-page/error-page">
      <button type="default"> 打开不存在的页面 </button>
    </navigator>
    <navigator id="navigateToErrorPage" class="navigator">
      <button type="default"> 未指定URL的跳转 </button>
    </navigator>
    <navigator style="flex-direction: row;justify-content: space-between;">
      <text>两端对齐样式测试</text>
      <view style="width: 20px;height: 20px; background-color: aqua;"></view>
    </navigator>
  </view>
</template>

<script setup lang="uts">
  const title = ref('navigator')
</script>

<style>
  .navigator {
    margin-bottom: 15px;
  }
</style>

:::

参见

Tips

navigator组件是对uni.navigateTo API的易用性封装,无需编写method方法,直接跳转页面。跳转后的新页面在onload生命周期中接收参数,详见页面onLoad生命周期