小程序路由页面跳转

时间：2020-02-23 14:40:31 收藏：0 阅读：85

小程序页面跳转

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>

。