Taro路由增强，任意传参、跳页面取值、路由中间件

最新推荐文章于 2024-10-17 15:48:36 发布

libeilong

最新推荐文章于 2024-10-17 15:48:36 发布

阅读量2k

点赞数

文章标签：中间件 vue java js python

本文链接：https://blog.csdn.net/qqliaaaa/article/details/108726663

版权

本文介绍了如何使用 Tarojs-router 解决Taro小程序中页面传参、跳转页面取值的问题，并展示了其路由中间件功能。通过此库，可以简化参数传递和页面间数据获取，实现类似 Flutter 的便捷跳转，并提供与 Koa 相似的路由中间件体验。

摘要由CSDN通过智能技术生成

前言

最近用Taro开发小程序发现一些不好用的地方：

页面传参需要手动拼接 url
页面传参无法携带大量任意类型数据
跳页面取值比较麻烦（比如填写表单跳页面选择城市，往往需要全局存储，回到页面再去取，也可以通过event，但是总要写很多代码）

为了实现上面的需求更方便，于是封装了一下：tarojs-router

看看 tarojs-router 如何解决上面的问题

一、页面传参

// ✘ 手动拼接路径，无法传任意类型，数据量有限制
Taro.navigateTo({
  url: '/pages/user/index?name=李四&id=1',
})

// ✔ tarojs-router 自动拼接，可传任意类型任意大小的数据
Router.navigate(
  { url: '/pages/user/index' },
  {
    // url 参数，自动拼接
    params: { id: 1, name: '李四' },
    // 可携带其他数据，任意类型
    data: [1, 2, 3, 4],
  }
)

// 目标页面获取数据，函数组件：
const { params, data