微信小程序 路由跳转

在js文件中跳转

1、wx.navigateTo

保留当前页面，跳转到应用内的非tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中 页面栈最多十层，之后按钮就没有响应。参数说明

//*****************当前页***************************
wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

//*****************被打开页***************************
Page({
  onLoad: function(option){
    console.log(option.id)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

2、wx.redirectTo

关闭当前页面，跳转到应用内的非tabbar 页面。。参数说明

//当前页
wx.redirectTo({ url: 'test?id=1' })

//被打开页
Page({
  onLoad: function(option){
    console.log(option.id)
  }
})

3、wx.switchTab

跳转到 tabBar 页面，并 关闭其他所有非 tabBar 页面。。参数说明

//当前页
wx.switchTab({ url: '/index' })

4、wx.reLaunch

关闭所有页面，打开到应用内的某个页面。参数说明

//当前页
wx.reLaunch({ url: 'test?id=1' })

//被打开页
Page({
  onLoad: function(option){
    console.log(option.id)
  }
})

5、wx.navigateBack

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

//当前页
wx.navigateBack({
  delta: 2 //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
})

6、wx.navigateToMiniProgram

打开另一个小程序。参数说明

//当前页
wx.navigateToMiniProgram({
  appId: '',//必填
  path: 'page/index/index?id=123',
  extraData: {//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据。
    foo: 'bar'
  },
  envVersion: 'develop',
  success(res) {
    // 打开成功
  }
})

在wxml页面中跳转

参数说明

<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

获取路由参数：

Page({
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})