微信小程序开发学习笔记——2.11navigator页面链接导航

本文链接：https://blog.csdn.net/Qy_cm/article/details/136132816

本文介绍了微信小程序中navigator组件的导航行为，重点比较了navigate、reLaunch和redirect的区别，以及open-type属性在控制返回按钮显示上的作用。通过实例演示了如何使用这些特性进行页面跳转和控制左上角返回键的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

>>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接： https://www.bilibili.com/video/BV19G4y1K74d?p=14

一、navigator页面链接

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

属性之一

navigate可以记录上一个缓存页，点击左上角返回按钮可以跳转回上一个页面，但是redirect不行。共同点是两者都不能跳转到tabbar页面（导航菜单这个东西还没配置，之后的课上再讲）。

reLaunch和redirect很像，都不能跳转回上一个页面，区别在于reLaunch可以跳转到任何指定页面包括tabbar但redirect不能跳到tabbar。

二、例子

demo.wxml文件中添加以下代码

<navigator url="/pages/index/index">首页</navigator>
<navigator url="/pages/logs/logs" class="out">
  <image src="/static/image/gif1.gif" class="gif" mode=""/>
</navigator>

demo.wxss文件中添加以下代码

.out .gif{
  width: 200rpx;
  height: 200rpx;
}

index.wxml

<navigator url="/pages/demo/demo" open-type="redirect"><!--redirect使跳转到下一个页面后不会出现后退一步的按钮（左上角）-->
  go demo page
</navigator>

点击go demo page

跳转到测试页面左上角没有返回键，因为open-type设置了redirect。

点击gif图片跳转到日志，左上角有返回键。