小程序页面跳转的几种方式

一：js实现

1、navigateTo (有返回键，不可以跳转到tabBar页面），多用于进入详情页或页面级别的跳转

//保留当前页面，跳转到应用内的某个页面
wx.navigateTo({
  url: '/pages/detail/detail?id=1'
})

2、switchTab (没有返回键，只能跳转到tabBar页面，不可以携带参数）

wx.switchTab({  
      url: `/pages/detail/detail`,
 })

3、reLaunch (跳转任意页面，没有返回，有首页按钮）

 wx.reLaunch({
      url: '/pages/detail/detail'
  })

4、redirectTo （只可以跳转tabBar页面，没有返回，但有首页按钮）

wx.redirectTo({
       url: `/pages/detail/detail`,
 })

5、navigateBack (应用在目标页面，delta值为1，表示跳转上一页，2表示跳两级）

wx.navigateBack({
       delta:1
    })

区别：

1、wx.navigetor是开启一个新页面，那个页面是隐藏了，原页面是onHide，所以是可以返回的，但是返回之后，跳转的页面就unload了
2、wx.redirecTo是当前页面替换成新的页面，所以返回不去onunload（页面被卸载）
3、tabBar无论跳那个页面都是onHide

路由传参注意：

跳转页面传递数组参数必须序列化

let  arr=[1,2,3,4,5]
category = JSON.stringify(arr)        //取子集分类 数组传递需要序列化
wx.navigateTo({
   url: `/pages/detail/detail/?cate= ${category} `,
})

跳转页面传递数组参数必须序列化

onLoad: function (options) {
  let   category = JSON.parse(options.cate);
 console.log(category)
}

二：navigateor组件实现

1、<navigator url = "/pages/details/details">跳转到新页面</navigator>
2、<navigator url = "/pages/details/details" open-type = "redirect">跳转到新页面</navigator>
3、<navigator url = "/pages/details/details" open-type = "switchTab">跳转到新页面</navigator>