微信小程序开发教程-页面跳转-声明式导航

介绍

wxml中使用 <navigator> 标签,无需写JS,适合纯点击跳转

基础语法

<navigator url="跳转地址" open-type="跳转类型">点击跳转</navigator>

open-type 对应5种跳转模式

<!-- 1. 保留当前页,跳转到新页面(默认) -->
<navigator url="/pages/detail/detail">去详情页</navigator>

<!-- 2. 关闭当前页,跳转新页面 -->
<navigator url="/pages/index/index" open-type="redirect">重定向到首页</navigator>

<!-- 3. 返回上一页 -->
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

<!-- 4. 切换Tab页面 -->
<navigator url="/pages/mine/mine" open-type="switchTab">我的页面</navigator>

<!-- 5. 关闭所有页面,跳转指定页面 -->
<navigator url="/pages/index/index" open-type="reLaunch">重启到首页</navigator>

声明式导航传参

通过url拼接参数传递,和浏览器地址栏传参一致

<navigator url="/pages/detail/detail?id=1001&name=小程序跳转">带参数跳转详情</navigator>

禁用跳转(按钮防重复点击)

<navigator url="/pages/detail/detail" hover-class="none" disabled="{{isDisable}}">禁止重复跳转</navigator>

原文出处:/show_1GW3XNdt5VPA.html