---
name: Navigator
title: 导航
category: 导航
owner: 张静媛
---

## 示例

```atom 基础示例
<template>
    <view class="wrap">
        <view class="title">导航 open-type 默认（navigate）</view>
        <div class="router-view">
            <router-view></router-view>
        </div>
        <button><navigator :url="fooUrl">点我跳转到 Foo 页面</navigator></button>
        <view class="title">导航 open-type redirect，点击态为紫罗兰色，阻止祖先节点使用点击态</view>
        <div class="router-view">
            <router-view></router-view>
        </div>
        <button><navigator :url="barUrl" open-type="redirect" hover-class="hover-purple" :hoverStopPropagation="true">点我跳转到 Bar 页面</navigator></button>
        <view class="title">导航 open-type switchTab，没有点击态</view>
        <div class="router-view">
            <router-view></router-view>
        </div>
        <button><navigator :url="homeUrl" open-type="switchTab" hover-class="none">点我跳转到 Home 页面</navigator></button>
        <view class="title">导航 open-type navigateBack，阻止祖先节点使用点击态</view>
        <div class="router-view">
            <router-view></router-view>
        </div>
        <button><navigator :delta="2" open-type="navigateBack" :hoverStopPropagation="true">点我回退2个页面</navigator></button>
    </view>

</template>

<script type="config">
    {
        components: {
            navigator: 'components/Navigator/Navigator',
            view: 'components/View/View',
            button: 'components/Button/Button'
        },
        data: {
            fooUrl: '/foo',
            barUrl: '/bar',
            homeUrl: '/home'
        }
    }
</script>
<script>

</script>
<style scoped>
.wrap {
    font-size: .16rem;
    padding: .1rem 0;
    background: #fff;
}
.router-view {
    padding: 0 0 0 .2rem !important;
    height: 100px;
    background-color: #eee;
}
.title {
    font-size: .16rem;
    color: #999;
    padding: 0 0 0 .2rem !important;
    margin-top: .2rem;
}

.text-container {
    padding: .2rem !important;
}
.hover-purple {
    background-color: rgba( 138, 43, 226, .2);
    opacity: .7;
}
</style>
```

## API
### Props



名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
target | String | self | 可选 | 在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram| H5暂时不支持miniProgram
url | String | - | 可选 | 应用内的跳转链接 | 当openType 为 navigateBack 时, 该值被忽略
openType | String | navigate | 可选 | 跳转方式 | -
delta | Number | 1 | 可选 | 当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数 | -
hoverClass | String | navigator-hover | 可选 | 指定点击时的样式类，当hover-class="none"时，没有点击态效果 | -
hoverStopPropagation | boolean | false | 可选 | 指定是否阻止本节点的祖先节点出现点击态。 | -
hoverStartTime | number | 50 | 可选 | 按住后多久出现点击态，单位毫秒。 | -
hoverStayTime | number | 600 | 可选 | 手指松开后点击态保留时间，单位毫秒。 | -

### Slots



名称 | 描述
--- | ---
default | 文本子节点

### Events
无