路由

  关于路由，在 vue2 中已经了解到了。

通俗的理解就是：Hash 地址（锚链接）与组件之间的对应关系。

一、小程序路由

1、前端路由：

  在 vue2 的学习时，我们了解到为了更好的实现页面切换、简化路由配置，特地的使用了 vue-router 来简化开发。

  通过小程序前面的学习，我们发现了小程序路由其实通过app.json中的pages配置项已经简化了路由配置了。

2、页面导航

  页面导航是指页面之间的相互跳转。

浏览器中：

① 声明式导航（通过点击链接实现的导航方式）

• <a>链接
• vue 项目中的<router-link>

② 编程式导航（通过调用 API 方法实现的导航方式）

• 常规的 location.href

3、小程序导航

小程序中：

① 声明式导航（通过点击链接实现的导航方式）

• navigator 组件 (opens new window)

② 编程式导航（通过调用 API 方法实现的导航方式）

• 路由 API (opens new window)

使用什么导航 API 重点关注 navigator 导航组件中的open-type属性值即可

二、小程序导航

1、navigator 组件

  小程序导航组件虽多，但常有的属性也就几个。

① 使用示例：

<!-- 导航到非tabBar页面 -->
<navigator url="/pages/message/message">导航到消息页面</navigator>

<!-- 导航到tabBar页面 -->
<navigator url="/pages/cart/cart" open-type="switchTab">导航cart页面</navigator>

② open-type 属性值

合法值	说明	类比
navigate	对应 wx.navigateTo (opens new window) 的功能 （默认值）	类似于 vue 中的 $router.push()
redirect	对应 wx.redirectTo (opens new window) 的功能	类似于 vue 中的 $router.replace()
switchTab	对应 wx.switchTab (opens new window) 的功能
navigateBack	对应 wx.navigateBack (opens new window) 的功能（delta='n'可定义步长 n）	类似于 vue 中的$router.go(n)
exit	退出小程序（target="miniProgram"时生效）

<!-- 后退导航 -->
<navigator url="/pages/cart/cart" open-type="navigateBack" delta="1">导航cart页面</navigator>

deta 属性值默认是 1，可以省略

2、路由 API

  关于编程式导航 AP 有哪些，可以参考上面声明式导航中的open-type 属性值说明内容。

① 代码示例：

<button bindtap="gotoMessage">跳转到消息页面</button>

Page({
  gotoMessage() {
    wx.navigateTo({
      url: 'pages/message/message'
    })
  }
})

② 可选属性：

属性	说明
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

其他导航 API 的使用大差不差 😂

三、数据传递

  和 vue 一样的思路：

回顾 ✍：vue 路由参数

  常规的传参操作：

• query 传参

<router-link to="/part1?title=part1">part1</router-link>

<router-link :to="`/part1?title=${item.title}`">part1</router-link>

console.log($route.query.title)

• params 传参

<router-link :to="`/part1/${item.title}`">part1</router-link>

console.log($route.params.title)

  除此之外，vue 还提供了 props 传参的功能。

export default new VueRouter({
  routes: [
    // 1、params传参
    {
      path: '/part2/:title',
      component: () => import('../page/PartTwo.vue'),

      props: true
    },

    // 2、query传参
    {
      path: '/part3',
      component: () => import('../page/PartThree.vue'),

      // 这里的props属性值会传给 路由组件PartOne
      // props($route) {
      //   return { title: $route.query.title }
      // }
      props({ query }) {
        return { title: query.title }
      }
    }
  ]
})

export default {
  name: 'PartOne',
  props: ['title']
}

1、常规传参

<navigator url="/pages/info/info?name=lencamo&age=20">导航到消息页面</navigator>

• 接收参数

Page({
  onLoad: function (options) {
    // 打印页面跳转时携带的参数
    console.log(options.name)
  }
})

2、返回传参

<button bindTap="navBackFn">导航到消息页面</button>

通过直接操作上个页面的 wi 页面实例

Page({
  // 一、作用于自定义的返回按钮
  navBackFn() {
    // 1、返回导航
    wx.navigateBack()

    // 2、传递数据
    // const pages = getCurrentPages()
    // const prePage = pages[pages.length - 2]

    // prePage.setData({
    //   // 在发生跳转时，使用当前页数据填充上一页页面数据
    // })
  },

  // 二、作用于小程序左上角的 < 返回图标
  onUnload() {
    // 2、传递数据
    const pages = getCurrentPages()
    const prePage = pages[pages.length - 2]

    prePage.setData({
      // 在发生跳转时，使用当前页数据填充上一页页面数据
    })
  }
})

3、页面通信 ✍

  回顾前面的数据传递方式：

  那除此此外，还有没有什么其他方式（比如：vue 中为我们额外的提供了 props 传参的功能）？

答案

  我们可以利用小程序基础库 2.7.3 中 wx.navigateTo() 新增的 events 参数

  其中 events 参数用于监听被打开页面发送到当前页面的数据。我们可以使用 EventChannel 进行页面通信。

const eventChannel = this.getOpenerEventChannel()

wx.navigateTo --> 页面通信 (opens new window)

① 常规传参

wx.navigateTo({
  url: '/pages/info/info',
  success: function (res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', {
      data: {
        name: 'lencamo',
        age: 20
      }
    })
  }
})

//test.js
Page({
  onLoad: function (option) {
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', function (data) {
      console.log(data)
    })
  }
})

② 返回传参

// 当前页面
Page({
  navToFn() {
    wx.navigateTo(
      url: 'xxxxx',
      events: {
        // 随便编写回调
        backEvent(data) {
          console.log("回调传来的数据：",data)
        }
      }
    )
  }
})

// 被打开页面
Page({
  navBackFn() {
    // 1、返回导航
    wx.navigateBack()

    // 2、数据通信
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('backEvent', { xxxx })
  }
})