页面跳转navigator

雨点打透心脏的1/2处 2021-07-25 00:09 487阅读 0赞

页面链接。

**属性说明**

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加&nbsp;<code>.vue</code>&nbsp;后缀</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>open-type</td> 
   <td>String</td> 
   <td>navigate</td> 
   <td>跳转方式</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>delta</td> 
   <td>Number</td> 
   <td>&nbsp;</td> 
   <td>当 open-type 为 'navigateBack' 时有效，表示回退的层数</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>animation-type</td> 
   <td>String</td> 
   <td>pop-in/out</td> 
   <td>当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：<a href="https://uniapp.dcloud.io/api/router?id=animation" rel="nofollow">窗口动画</a></td> 
   <td>5+App</td> 
  </tr> 
  <tr> 
   <td>animation-duration</td> 
   <td>Number</td> 
   <td>300</td> 
   <td>当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。</td> 
   <td>5+App</td> 
  </tr> 
  <tr> 
   <td>hover-class</td> 
   <td>String</td> 
   <td>navigator-hover</td> 
   <td>指定点击时的样式类，当hover-class="none"时，没有点击态效果</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>hover-stop-propagation</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>指定是否阻止本节点的祖先节点出现点击态</td> 
   <td>微信小程序</td> 
  </tr> 
  <tr> 
   <td>hover-start-time</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>按住后多久出现点击态，单位毫秒</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>hover-stay-time</td> 
   <td>Number</td> 
   <td>600</td> 
   <td>手指松开后点击态保留时间，单位毫秒</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**open-type 有效值**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigate</td> 
   <td>对应 uni.navigateTo 的功能</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>redirect</td> 
   <td>对应 uni.redirectTo 的功能</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>switchTab</td> 
   <td>对应 uni.switchTab 的功能</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>reLaunch</td> 
   <td>对应 uni.reLaunch 的功能</td> 
   <td>头条小程序不支持</td> 
  </tr> 
  <tr> 
   <td>navigateBack</td> 
   <td>对应 uni.navigateBack 的功能</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**注意**

*  navigator-hover 默认为 \{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;\}, `<navigator>` 的子节点背景色应为透明色。\*\*
 *  app-nvue 平台只有纯nvue项目（render为native）才支持 `<navigator>`。非render为native的情况下，nvue暂不支持navigator组件，请使用API跳转。
 *  **示例** [查看示例][Link 1]
    
        <template>
            <view>
                <view class="page-body">
                    <view class="btn-area">
                        <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
                            <button type="default">跳转到新页面</button>
                        </navigator>
                        <navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
                            <button type="default">在当前页打开</button>
                        </navigator>
                        <navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
                            <button type="default">跳转tab页面</button>
                        </navigator>
                    </view>
                </view>
            </view>
        </template>
    
        // navigate.vue页面接受参数
        export default {
            onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
                console.log(option.id); //打印出上个页面传递的参数。
                console.log(option.name); //打印出上个页面传递的参数。
            }
        }
    
    url有长度限制，太长的字符串会传递失败，可使用[窗体通信][Link 2]、[全局变量][Link 3]，或`encodeURIComponent`等多种方式解决，如下为`encodeURIComponent`示例。
    
        <navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
    
        // navigate.vue页面接受参数
        onLoad: function (option) {
            const item = JSON.parse(decodeURIComponent(option.item));
        }

*  **注意**
 *  跳转tabbar页面，必须设置open-type="switchTab"

例：

<navigator open-type="switchTab" :url="'/pages/home/index?id='+1">
    	<button  v-show="display" type="primary" >进入小程序</button>
    </navigator>

[Link 1]: https://uniapp.dcloud.io/h5/pages/component/navigator/navigator
[Link 2]: https://uniapp.dcloud.io/collocation/frame/communication
[Link 3]: https://ask.dcloud.net.cn/article/35021