10 微信小程序路由跳转

一、四种跳转方式

API路由详解

除了tabBar这种底部跳转的方法，我们还有路由跳转，以下四种方式：

　　1. wx.switchTab() ：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

　　　　　　　　   url：  tabBar 页面的路径（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数

　　2.wx.reLaunch() ：关闭所有页面，打开到应用内的任意页面，可带参

　　　　　　　　url： 'path?key=value&key2=value2'

　　3.wx.redirectTo() ：关闭当前页面，跳转到应用内非 tabBar 页面路径，可带参(会执行onUnload生命周期方法)

　　　　　　　　url ： 'path?key=value&key2=value2'

　　4.wx.navigateTo()：保留当前页面，跳转到应用内非 tabBar 页面路径（会执行onHide生命周期方法，生成顶部返回按钮，并且页面堆栈+1）

　　　　　　　　url： 'path?key=value&key2=value2'

路由触发详解

路由参数：

四种跳转使用：

1.1wx.switchTab(Object object)

示例代码：

　1）　先做两个tabBar页面

 "tabBar": {
   "backgroundColor":"#123",
   "color": "#FFFFFF",
   "list": [{
     "pagePath": "pages/test/test",
     "text": "text",
     "iconPath": "images/icon1.png",
     "selectedIconPath": "images/icon1-active.png"
   },
   {
    "pagePath": "pages/test2/test2",
    "text": "text2",
    "iconPath": "images/icon2.png",
    "selectedIconPath": "images/icon2-active.png"
  }]
 },

主文件 app.js

　2）　test.js  往index页面跳转  /表示根目录

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

1.2wx.reLaunch(Object object)

wx.redirectTo(Object object) / wx.navigateTo(Object object) 和这个代码一样，注意跳转页面的不同就好了

示例代码

test1.js

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

test2.js 页面加载会触发

Page({
  onLoad(option) {
    console.log(option.query)
  }
})

1.5wx.redirectTo与wx.navigateTo的区别

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

　　2.如果不想有返回按钮，可以用wx.redirectTo进行页面跳转（会执行onUnload生命周期，关闭当前页面跳转，没有页面可以返回）

　　3.调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈(保留页面去跳转，页面计数会增加，返回页面时用)，而 redirectTo 方法则不会（和2相似）

1.6 wx.navigateBack(Object object)

使用 wx.navigateBack()，关闭当前页面，返回上一页面或多级页面，最多十层。
可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

参数：

使用：

示例代码：

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

二、在前端跳转方法 见官方文档

navigator 官方API

---