参数 携带 跳转_微信小程序：页面跳转及参数传递

本文首发自个人自有博客：【FaxMiao个人博客】，一个关注Web前端开发技术、关注用户体验、记录前端点滴，坚持更多原创，为大家提供高质量技术博文！

前言

小程序的跳转方法有很多种，有的人一直只用wx.navigateTo跳转，由于页面栈限制，跳着跳着小程序就没反应了，今天就来说小程序的跳转几种跳转方式及作用。

正文

一、wx.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。需要跳转的 tabBar 页面的路径 ，需在 app.json 的 tabBar 字段定义的页面，路径后不能带参数。

wx.switchTab({url:'pages/index/index'})

上面说了，使用wx.switchTab跳转是不能在连接后面带参数的，那我们要怎么解决呢？我们可以通过在app.js定义一个全局变量，跳转前赋值，跳转后直接用全局变量就可以了，代码如下：

app.js

globalData: {parameter: 0}

index.wxml

<view bindtap="test">点我跳转</view>

index.js

const app = getApp();Page({test: function () {// 这里给全局变量赋值app.globalData.parameter = 1;// 执行跳转wx.switchTab({url:'pages/test/test'})}})

二、wx.redirectTo

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。连接后可以拼接参数。

wx.redirectTo({url: "../test/test?id=1"})

三、wx.reLaunch

关闭所有页面，打开到应用内的某个页面（目标页面）。连接后可以拼接参数

wx.reLaunch({url: "../test/test?id=1"})

wx.reLaunch()与 wx.redirectTo()的用途基本相同， 只是wx.reLaunch()会先关闭内存中所有保留的页面，再跳转到目标页面。

四、wx.navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.navigateTo({url: "../test/test?id=1"})

对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。

五、wx.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

wx.navigateBack({delta: 1 //返回的页数})

很多时候，我们需要在返回上一页面的时候，携带参数回去或者修改原有参数值，来改变页面的展示效果等。

这里我们就需要用到getCurrentPages了，代码如下：

back: function () {let pages = getCurrentPages(); // 获取加载的页面对象let prevPage = pages[pages.length - 2]; // 获取上一页的页面对象，1代表当前页，2代表上一页// 把上一页参数num值改为1prevPage.setData({num: 1})// 返回上一页wx.navigateBack({delta: 1})}

效果图：

六、wxml页面组件navigator跳转【官方文档】

<navigator url="../test/test?id=1" open-type="navigate"></navigator>

open-type跳转方式：navigate、redirect、switchTab、reLaunch、navigateBack，也就是本文前5点跳转方法。

navigate：对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能redirect：对应 wx.redirectTo 的功能switchTab：对应 wx.switchTab 的功能reLaunch：对应 wx.reLaunch 的功能navigateBack：对应 wx.navigateBack 的功能

总结

wx.switchTab跳转到tabbar页面最好选择，因为它会先关闭所有非tabbar的页面。因为微信对小程序页面栈有限制，所以适当使用wx.redirectTo、wx.redirectTo()可以避免跳转前页面占据运行内存。