界面跳转和数据传递

界面跳转有两种方式：
-通过Navgator组件跳转
-通过wx的api跳转

通过Navgator组件

<!-- 1.url 路径可以相对路径，也可以是绝对路径 -->
<navigator url='/pages/detail/detail'>跳到详情页面</navigator>

<!-- 2. open-type="redirect" 会将跳转前的页面关闭 -->
<navigator url='/pages/detail/detail' open-type="redirect">跳到详情页面(redirect)</navigator>
<!-- open-type="switchTab" 可以跳转到tabbar页面 -->
<navigator url='/pages/about/about' open-type="switchTab">跳到详情页面(switchTab)</navigator>

<!-- open-type="reLaunch" 会关闭所有页面 -->
<navigator url='/pages/detail/detail' open-type="reLaunch">跳到详情页面(reLaunch)</navigator>

<!-- open-type="navigateBack" 返回功能，返回到上一页 -->
<navigator open-type="navigateBack">返回</navigator>

<!-- 跳转两次到评论页面，如果要从评论页面直接跳转到首页，设置 delta = 2 -->
<navigator open-type="navigateBack" delta="2">返回首页</navigator>

通过Navgator组件跳转到页面并传递数据

<!-- 通过在路径后面拼接key=value来传递数据 -->
<navigator url='/pages/detail/detail?name=haha&sex=1'>跳到详情页面并传递数据</navigator>

在跳转后的detail页面的onLoad方法中获取传递过来的数据

  onLoad: function (options) {
    // 输出 {name: "haha", sex: "1"}
    console.log(options);
  },

从detail页面返回时，如果想给上层页面返回数据，可以在onUnload()方法中，即页面退出的时候，找到要修改数据的页面，修改页面数据

onUnload: function () {
    //1.全局函数返回所有栈的页面
   const pages =  getCurrentPages();
   //得到home页面对象 pages.length-2是得到当前页面的前一个页面对象
   const home = pages[pages.length-2];

   //2.调用页面对象的方法修改数据
   home.setData({
     title:'我是修改后的标题'
   })
   console.log(pages);
  },

通过wx的api跳转

<button size="mini" bindtap="gotoDetail">跳转到详情页面</button>

gotoDetail(){
    wx.navigateTo({
      // url: '/pages/detail/detail',  
      //以下是传递数据   
      url: '/pages/detail/detail?title=你是谁',

    })

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

跳转到详情页面，通过代码返回

<button size="mini" bindtap="handleBack">通过按钮调用代码返回</button>

handleBack(){
    //通过代码方式返回
    wx.navigateBack({
      delta: 1,
    })
  },