微信小程序-路由跳转

当前测试的基础库版本为 2.17.0

页面分类

tabBar 页面 - app.json中配置的 tabBar 页面

page 页面 - 其他的 非tabBar 页面，后面称为 page 页面

页面栈

// 微信小程序提供页面栈，用来保存页面。
// 可以在页面中通过 getCurrentPages() 方法来获取页面栈的数据
// 开发者工具的控制台也可以直接使用该方法

// 页面栈最多十个页面，最后一个为当前页
// 页面栈最少一个页面，只有当前页
// 页面栈内按理说最多只会存在一个 tabBar 页面，并且只会在第一个位置中。
// 因为可以跳转到 tabBar 页面的方法，都会先把栈内的页面给清空
// 跳转到 page 页面不清空页面栈的数据的，前 tabBar 页面则会是栈内第一个页面

路由的方法

switchTab - 跳转到 tabBar 页面

// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
  url: '/pages/home/index',
  success: function(){ },
  fail: function(){ },
  complete: function(){ }
});
// url 添加参数，不会报错，但目标页面获取不到参数
// url 如果为 page 页面，则会直接报错
// 成功之后，页面栈中会清空所有的页面，只有当前 tabBar 页面

reLaunch - 打开应用中的某个页面，可以是 tabBar 页面，也可以是 page 页面

// 关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
  url: '/pages/page1/index?id=123&type=type1',
  success: function(){ },
  fail: function(){ },
  complete: function(){ }
});
// url 添加参数，tabBar 和 page 目标页面都可以接收到
// 成功后，页面栈中只有当前页面

redirectTo - 跳转到 page 页面

// 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.redirectTo({
  url: '/pages/page1/index?id=123&type=type1',
  success: function(){ },
  fail: function(){ },
  complete: function(){ }
});
// url 不能为 tabBar 页面，否则直接报错
// 成功后，前页面会被关闭，页面栈中不会保留前页面，即是当前页面替换了前页面

navigateTo - 跳转到 page 页面

// 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateTo({
  url: '/pages/page1/index?id=123&type=type1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    oneEvent: function(params){
      console.log(params);
    }
  },
  success: function(res){
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('event-name', { param1: 'value1' })
  },
  fail: function(){ },
  complete: function(){ }
});
// url 不能为 tabBar 页面，否则直接报错
// 成功后，前页面会保留在页面栈内。
// 如果页面栈数据已经为十个，则该方法不会起作用

navigateBack - 返回页面栈内的某个页面，默认返回上一个

// 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
wx.navigateBack({
  delta: 1,
  success: function(){ },
  fail: function(){ },
  complete: function(){ }
});
// delta 从页面栈取出几个页面，则栈内剩余的最后一个为目标页面
// delta 如果delta设置的超过了页面栈的最大数，则会返回栈内的第一个页面
// 返回页面之后，不会重新执行页面的初始化方法

目标页面获取url参数

// test
Page({
  onLoad (option) {
    console.log('query', options); // { id: 123, type: "type1" }
  }
})