navigator

值名称	描述
navigate	对应 uni.navigateTo 或 navigateToMiniProgram 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能
navigateBack	对应 uni.navigateBack 的功能

delta

number

当 open-type 为 navigateBack 时有效，表示回退的层数

app-id

string

当target="miniProgram"时有效，要打开的小程序 appId

path

string

当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页

extra-data

object

当target="miniProgram"时有效，需要传递给目标应用的数据，目标应用可在 App.onLaunch()，App.onShow() 中获取到这份数据

version

string

当target="miniProgram"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是体验版或正式版，则打开的小程序必定是正式版

animation-type

string

"pop-in/out"

当 open-type="navigateTo" 或 open-type="navigateBack" 时有效，窗口的显示/关闭的动画类型。

值名称	描述
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	从右侧平移出栈动画效果

animation-duration

number

300

当 open-type="navigateTo" 或 open-type="navigateBack" 时有效，窗口的显示/关闭动画的持续时间。

hover-class

string

指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

hover-stop-propagation

boolean

指定是否阻止本节点的祖先节点出现点击态

hover-start-time

number

按住后多久出现点击态，单位毫秒

hover-stay-time

number

手指松开后点击态保留时间，单位毫秒

render-link

boolean

true

是否给 navigator 组件加一层 a 标签控制 ssr 渲染

# open-type 兼容性

	Android	iOS	web
navigate	3.9	4.11	4.0
redirect	3.9	4.11	4.0
switchTab	3.9	4.11	4.0
reLaunch	3.9	4.11	4.0
navigateBack	3.9	4.11	4.0

# navigator 属性兼容性

	Android	iOS	web
target	3.9	4.11	4.0
url	3.9	4.11	4.0
open-type	3.9	4.11	4.0
delta	3.9	4.11	4.0
path	3.9	x	4.0
animation-type	3.9	4.11	4.0
animation-duration	3.9	4.11	4.0
render-link	x	x	4.0

# 示例

hello uni-app x

Template

Script

<template>
  <page-head :title="title"></page-head>
  <view class="uni-padding-wrap uni-common-mt">
    <navigator class="navigator navigate" url="navigate?title=navigate">
      <button type="default">跳转到新页面</button>
    </navigator>
    <navigator class="navigator redirect" url="redirect?title=redirect" open-type="redirect">
      <button type="default">在当前页打开</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>



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