小程序页面跳转的几种方式「终于解决」

大家好，欢迎来到IT知识分享网。

小程序官方文档

我们有两种方式实现小程序的页面跳转：用js的方式实现和用navigator组件的方式

1、wx.navigateTo(有返回键，不可以跳转到tabBar页面)

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

IT知识分享网

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

IT知识分享网wx.switchTab({ 
     
      url: `/pages/detail/detail`,
    })

3、wx.reLaunch(跳转任意页面，没有返回键 ，有首页按钮)

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

4、wx.redirectTo(关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面)

IT知识分享网wx.redirectTo({ 
   
   url: `/pages/detail/detail`,
})

5、wx.navigateBack(关闭当前页面，返回上一页面或多级页面，data值为1，表示跳转上一页，2表示跳两级)

wx.navigateBack({ 
   
       delta:1
    })

区别：

1wx.navigateTo是开启一个新页面，那个页面是隐藏了，原页面是onHide,所以是可以返回的，但是返回之后，跳转的页面就unload了

2、wx.redirectTo是当前页面替换成新的页面，所以返回不去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)
}

参数值过长接受时候内容不全的问题

//传参
wx.navigateTo({ 
   //wx.redirectTo、wx.reLaunch
    url: '/pages/details/details?id=' + encodeURIComponent(id)
    })

//接收
onLoad(options) { 
   
    var id = decodeURIComponent(options.id);
}

二、navigator组件实现
小程序官方文档

1. <navigator url = "/pages/details/details">跳转到新页面</navigator>

2. <navigator url = "/pages/details/details" open-type = "redirect">跳转到新页面</navigator>
   对应 wx.redirectTo 的功能

3. <navigator url = "/pages/details/details" open-type = "switchTab">跳转到新页面</navigator>
   对应 wx.switchTab 的功能

4. <navigator url = "/pages/details/details" open-type = "reLaunch">跳转到新页面</navigator>
   对应 wx.reLaunch 的功能

5. <navigator url = "/pages/details/details" open-type = "navigateBack">跳转到新页面</navigator>
   对应 wx.navigateBack 的功能