微信小程序路由跳转

• wx.switchTab()
  跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
• wx.reLaunch()
  关闭所有页面，打开到应用内的某个页面（包括 tabBar页面）
• wx.redirectTo()
  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
• wx.navigateTo()
  保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
• wx.navigateBack()
  关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。（页面栈最多十层）

下面看代码

1、wx.switchTab()

wx.switchTab({
  url: '/xxx'
})

{
  "tabBar": {
    "list": [{
      "pagePath": "home",
      "text": "首页"
    },
    {
      "pagePath": "classify",
      "text": "分类"
    }]
  }
}

注意 wx.switchTab() 它只可以跳转tabBar页面！并且关闭其他不是tabBar页面，也就是我们的子页面。

2、wx.reLaunch()

wx.reLaunch({
	url: 'xxx?id=xxx'
})

// 已跳转xxx页面
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

注意 wx.reLaunch() 它会关闭所有页面！然后打开某一个指定的页面，在这里没有 tabBar 与子页面之分。

3、wx.redirectTo()

wx.redirectTo({
  url: 'xxx?id=xxx'
})

// 已跳转某子页面
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

注意 wx.redirectTo() 它唯一不可以跳转 tabBar 页面！跳转前只关闭当前页面。

4、wx.navigateTo()

// A页面
wx.navigateTo({
	url: '../xxx?id=xxx',
	events: {
	//events里的函数是监听B页面的事件，获取其传过来的数据。events里可以有多个监听事件
		BarriveA: function(data){
			console.log(data) //这是从B页面向A页面传递的数据
		},
		success: function(res) {
			//通过eventChannel向B页面发送数据。
			res.eventChannel.emit('ArriveB', {text: '这是从A页面向B页面传递的数据'})
		}
	}
})


// B页面
onLoad: function(option) { // 这个页面里接收数据和发送数据大onLoad里执行。
	//获取A页面中url里的参数值
	console.log(option.id)
	//B页面发送数据用getOpenerEventChannel()里的emit函数，接收数据用其on函数。
	const eventChannel = this.getOpenerEventChannel()
	eventChannel.emit('BarriveA', {text: '这是从B页面向A页面传递的数据'})
	eventChannel.on('ArriveB', function(data) {
		console.log(data) //这是从A页面向B页面传递的数据
	})
}

注意 wx.navigateTo() 它可以保留当前页面并跳转到应用内的某个页面，但是不能跳到 tabbar 页面！通过以上写法可以使A与B组件互相通信。

5、wx.navigateBack()

// 此处是A页面
wx.navigateTo({
  url: 'B?id=xxx'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=xxx'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

注意调用 wx.navigateTo 跳转时，调用此方法的页面会被加入堆栈，而 redirectTo 方法则不会。