# 路由

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

通俗的理解就是:Hash 地址(锚链接)与组件之间的对应关系。

# 一、小程序路由

# 1、前端路由:

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

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

# 2、页面导航

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

浏览器中:

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

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

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

  • 常规的 location.href

# 3、小程序导航

小程序中:

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

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

使用什么导航 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 })
  }
})
更新于 : 7/8/2024, 10:21:14 AM