navigator

# navigator

组件类型：UniNavigatorElement

页面链接

# 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 属性

名称

类型

默认值

兼容性

描述

target

string

在哪个目标上发生跳转，默认当前应用

url

string(string.PageURIString)

当前应用内的跳转链接

open-type

string

"navigate"

跳转方式

合法值

兼容性

描述

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 渲染

# 示例

hello uni-app x

Template

Script

<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>



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