小程序跳转页面几种方式

需求：

 从home.wxml跳转到detail.wxml页

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

   区别： 

   wx.navigator是开启一个新页面，那个页面是隐藏了,原页面是onHide,所以是可以返回的，但是返回之后，跳转的页面就unload了
   wx.redirecTo是当前页面替换成新的页面，所以返回不去onunload(页面被卸载)
   tabBar无论跳哪个页面都是onHide 

    

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

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

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