---
name: "navigator"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "navigator - 页面链接，控制小程序的跳转"
---

## navigator

> [VERSION] 基础库 >= 2.10.0

### 描述

页面链接组件，用于页面间跳转。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `hover-stop-propagation` | `boolean` | 否 | `false` | 是否阻止本节点的祖先节点出现点击态 |
| `hover-start-time` | `number` | 否 | `20` | 按住后多久出现点击态，单位毫秒 |
| `hover-stay-time` | `number` | 否 | `70` | 手指松开后点击态保留时间，单位毫秒 |
| `url` | `string` | 是 | `""` | 跳转地址 |
| `open-type` | `string` | 否 | `"navigate"` | 跳转方式，可选值：navigate 跳转新页面（可返回），redirect 关闭当前页并跳转（不可返回），switchTab 跳转到 tabBar 页面，reLaunch 关闭所有页面并跳转，navigateBack 返回上一页 |
| `delta` | `number` | 否 | `1` | 当 open-type 为 'navigateBack' 时有效，表示回退的层数 |
| `hover-class` | `any` | 否 | `"navigator-hover"` | 指定点击时的样式类 |

### 示例代码

#### 基础跳转

*index.tyml*

```xml
<navigator url="/pages/detail/index" class="nav-item">跳转到详情页</navigator>
<navigator url="/pages/detail/index?id=123" class="nav-item">带参数跳转</navigator>
<navigator url="/pages/detail/index" open-type="redirect" class="nav-item">重定向跳转</navigator>
```

*index.tyss*

```css
.nav-item { padding: 20rpx; margin: 10rpx 0; background-color: #f5f5f5; border-radius: 8rpx; }
```

*index.js*

```javascript
Page({});
```

#### 跳转方式与点击态

*index.tyml*

```xml
<navigator url="/pages/home/index" open-type="switchTab" hover-class="nav-hover" class="nav-item">switchTab 跳转</navigator>
<navigator url="/pages/home/index" open-type="reLaunch" hover-class="nav-hover" hover-start-time="{{50}}" hover-stay-time="{{200}}" class="nav-item">reLaunch 跳转</navigator>
<navigator open-type="navigateBack" delta="{{1}}" class="nav-item">返回上一页</navigator>
<navigator open-type="navigateBack" delta="{{2}}" hover-class="none" class="nav-item">返回两层（无点击态）</navigator>
```

*index.tyss*

```css
.nav-item { padding: 20rpx; margin: 10rpx 0; background-color: #f5f5f5; border-radius: 8rpx; }
.nav-hover { background-color: #e0e0e0; }
```

*index.js*

```javascript
Page({});
```


<DemoBlock 
  githubUrl="https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/page-navigator" 
  qrCodeUrl="/images/qrCode/navigator.png" 
  lang="zh">
</DemoBlock>