微信小程序的路由

微信小程序的路由

1、小程序路由跳转

• wx.switchTab(Object object)

    跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，这里的tabBar是底下的导航栏指定的页面，

• (Object object)参数

{  "tabBar": {    "list": [      { "pagePath": "index", "text": "首页"      },      { "pagePath": "other", "text": "其他"      }    ]  }}wx.switchTab({  url: '/index'})

• 2、wx.reLaunch(Object object)

    关闭所有页面，打开到应用内的某个页面

代码示例：

wx.reLaunch({  url: 'test?id=1'})// test Page({ onLoad (option) { console.log(option.query) } })

• 3、wx.redirectTo(Object object)

    关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

参数

代码示例：

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

• 4、wx.navigateTo(Object object)

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

object.success 回调函数

示例代码

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' })  }})

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

• 5、wx.navigateBack(Object object)

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

代码示例：

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码// 此处是A页面wx.navigateTo({  url: 'B?id=1'})// 此处是B页面wx.navigateTo({  url: 'C?id=1'})// 在C页面内 navigateBack，将返回A页面wx.navigateBack({  delta: 2})

wx.redirectTo与wx.navigateTo的区别

1.利用wx.navigateTo跳转到下一个页面的时候（这时候会执行onHide方法），下一个页面头部会有返回按钮

2.如果不想有返回按钮，可以用wx.redirectTo进行页面跳转（这时候关闭此页面，会执行onUnload生命周期，这样下一个页面就不会有返回按钮了，因为上一个页面已经被关闭了，没有页面可以返回）
wx.navigateBack(Object object)

navigator标签页面之间的跳转

使用navigator进行跳转时，只能跳转到本地页面，当跳转到外部链接时无反应navigator跳转页面样式分为两种一种是左上角带返回按钮跳转到新的页面，另一种不带即在本页跳转，通过控制redirect属性

直接点击标签文字即可完成跳转，默认不能跳转到 tabBar 页面，如何跳转可设置属性open-type=“switchTab”

view>    <navigator url="../other/other" hover-class="changestyle">页面跳转，可以返回</navigator></view><view>    <navigator url="../other/other" hover-class="changestyle" redirect>页面跳转，无法返回</navigator></view>

组词