小程序路由页面跳转

小程序页面跳转

navigator组件跳转：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

wxAPI跳转：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

先说组件跳转：

<!-- 基本跳转 -->url中可以是绝对路径也可以是相对路径
<navigator url="/pages/detail/detail">跳到详情页</navigator>

另外navigator组件有一个比较重要的属性：open-type：跳转方式

navigate是open-type的默认取值：不会关闭所有页面，会直接覆盖到原有页面之上

redirect：不能跳到tabbar页面，关闭当前页面跳转到应用内的某个页面

switchTab：只能跳转到tabbar页面，并且关闭所有非tabbar页面

reLaunch：关闭所有页面，跳转到新页面，并且可以跳转到tabbar页面

<!--  navigator基本跳转 -->
<navigator url="/pages/detail/detail">跳到详情页</navigator>
<!-- redirect跳转 -->
<!-- 重定向 不会出现返回按钮 关闭当前页跳转到指定页 -->
<navigator url="/pages/detail/detail" open-type="redirect">跳到详情页</navigator>

<!-- switchTab -->
<navigator url="/pages/two/two" open-type="switchTab">
  <button>跳转到tabbar</button>
</navigator>  

<!-- reLaunch 可以跳转到任何页面 并且关闭掉所有的页面 -->
<navigator url="/pages/two/two" open-type="reLaunch">
  <button>reLaunch跳转</button>
</navigator> 

只针对没有发生过重定向的情况才可以使用navigateBack   否则报错，因为重定向之后此页面为第一个页面<navigator open-type="navigateBack">返回</navigator>

加上delta属性后可以返回多个层级<navigator open-type="navigateBack" delta="2">返回</navigator>

。

原文地址：https://www.cnblogs.com/fqh123/p/12349579.html