微信小程序之页面跳转(路由)，navigateTo redirectTo reLaunch

最新推荐文章于 2025-10-16 10:33:23 发布

原创最新推荐文章于 2025-10-16 10:33:23 发布 · 1.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

微信小程序专栏收录该内容

27 篇文章

订阅专栏

作用都是跳转页面，使用的时候略有不同：

介绍：

navigateTo

功能：保留当前页面，跳转到应用内的某个页面，形成页面栈的形式，可使用wx.navigateBack返回原页面。
使用场景：适用于需要保留当前页面状态，后续还需返回的情况。如从商品列表页跳转到商品详情页，用户查看完详情后可返回列表页，列表页的浏览位置、筛选条件等状态都能保留。
注意事项：使用navigateTo进行页面跳转时，每个页面都会被加入页面栈，而小程序页面栈的大小有限，要注意页面数量过多可能导致页面栈溢出。

redirectTo

功能：关闭当前页面，跳转到应用内的某个页面。跳转后无法通过返回按钮返回到原页面，新页面会替换当前页面在页面栈中的位置。
使用场景：适用于不需要保留当前页面状态，且不希望用户返回的情况。比如用户登录成功后从登录页跳转到主页，登录页的状态无需保留，也不希望用户通过返回按钮回到登录页。
注意事项：跳转的目标页面必须是当前页面的同级或者子级页面，否则跳转将会失败。

reLaunch

功能：关闭所有页面，打开到应用内的某个页面。无论之前有多少页面在栈中，都会被全部清空，然后打开指定的页面。
使用场景：适用于需要清空所有页面栈，重新打开一个页面的情况。比如用户退出登录后，需要清除所有已打开的页面，跳转到登录页；或者应用出现异常，需要重置到某个初始页面。
注意事项：由于reLaunch会关闭所有页面，使用时要确保这是用户期望的行为，避免不必要的页面切换影响用户体验。

代码实操：

我们在index页面上做个按钮，点击后跳转到page1页面，就像这样：

wxml代码：

<view class="indexContainer">
  <image class="avatarUrl" src="https://ww2.sinaimg.cn/mw690/61d7678dgy1hvt194v9kqj20p00uuape.jpg"/>
  <text class="userName">{{msg}}</text>
  <view class="content" bind:tap="goNext">
    <text>进入下一页面</text>
  </view>
</view>

goNext代码，我们顺便也在onHide和onUnload生命周期函数里面打上日志，方便查看：

/**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log('in index onHide');
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log('in index onUnload');
  },
  goNext(){
    wx.navigateTo({
      url: '/pages/page1/page1',
    })
  }

用到的样式（css）代码：


.indexContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatarUrl {
  width: 200rpx;
  height: 200rpx;
  margin: 100rpx 0;
  border-radius: 50%;
}

.userName{
  font-size: 32rpx;
  margin: 100rpx 0;
}

.content{
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  text-align: center;
  border: 1rpx solid #333;
  border-radius: 10rpx;
}

这个时候我们点击按钮，跳转到下一页：

navigateTo 保留当前页面，并没有销毁，只是隐藏了

接下来，我们把goNext里面调用的navigateTo 更换成redirectTo，看看效果，

redirectTo 关闭当前页面，看到了吧，index页面被销毁了。

接下来，我们把goNext里面调用的redirectTo更换成reLaunch，看看效果，

reLaunch 关闭所有页面，index页面同样被销毁了。

这时候，我们看不出来 redirectTo 和 reLaunch 有什么区别，这个时候，我们再增加一个页面page2，在page1中跳转，index中的跳转改为navigateTo

代码如下：

index.js

/**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log('in index onHide');
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log('in index onUnload');
  },
  goNext(){
    wx.navigateTo({
      url: '/pages/page1/page1',
    })
  }

page1.js

/**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log('in page1 onHide');
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log('in page1 onUnload')
  },

  goNext(){
    wx.redirectTo({
      url: '/pages/page2/pages',
    })
  }

page1.wxml

<view class="indexContainer">
  <button class="content" bind:tap="goNext">跳转到下一页</button>
</view>

page1.wxss

/* pages/page1/page1.wxss */
.indexContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content{
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  text-align: center;
  border: 1rpx solid #333;
  border-radius: 10rpx;
}

好，这个时候，我们连续跳转两次，到达page2，看日志的显示：