微信小程序开发教程-页面跳转-声明式导航 作者:马育民 • 2026-06-21 15:50 • 阅读:10027 # 介绍 wxml中使用 `<navigator>` 标签,无需写JS,适合纯点击跳转 ### 基础语法 ```html <navigator url="跳转地址" open-type="跳转类型">点击跳转</navigator> ``` ### open-type 对应5种跳转模式 ```html <!-- 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拼接参数传递,和浏览器地址栏传参一致 ```html <navigator url="/pages/detail/detail?id=1001&name=小程序跳转">带参数跳转详情</navigator> ``` ### 禁用跳转(按钮防重复点击) ```html <navigator url="/pages/detail/detail" hover-class="none" disabled="{{isDisable}}">禁止重复跳转</navigator> ``` 原文出处:/show_1GW3XNdt5VPA.html