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



  • 前言

    最近用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 } = useRouter()
    // 目标页面获取数据,Class 组件:
    const data = Router.getData()
    const params = getCurrentInstance().router?.params
    

    二、跳页面取值

    实现这种需求,简单做法是跳转过去后把选中的值全局存储起来,回到页面后再去取,自己实现这个过程比较麻烦

    熟悉flutter的可能知道

    // 跳转到目标页面
    final cityData = await Navigator.push(...)
    
    // 返回值到上一个页面
    Navigator.pop({cityName: '深圳', adcode: 'xxxx'})
    

    tarojs-router 中写法基本一致,内部通过 promise 实现

    // ✔ tarojs-router 封装了这个过程,直接使用
    const cityData = await Router.navigate({ url: '/pages/sel-city/index' })
    console.log(cityData?.cityName)
    
    // src/pages/sel-city/index.tsx
    const { backData } = useRouter()
    backData({ cityName: '深圳', adcode: 'xxxx' })
    

    三、路由中间件(附加功能)

    tarojs-router 提供和 koa 一致的路由中间件功能

    // 实现一个登录检查的路由中间件
    // auth-check.ts
    export const AuthCheck: IMiddlware<{ mustLogin: boolean }> = async (ctx, next) => {
      if (ctx.route.ext?.mustLogin) {
        const token = Taro.getStorageSync('token')
        if (!token) {
          const { confirm } = await Taro.showModal({
            title: '提示',
            content: '请先登录',
          })
          if (confirm) toLogin()
          throw Error('该页面必须要登陆:' + ctx.route.url)
        }
      }
      await next()
    }
    
    // router.ts
    Router.config({
      middlewares: [AuthCheck],
    })
    
    // ext 携带 mustLogin 并且为 true 则会检查 token,token 不存在则跳转登录
    Router.navigate({ url: '/pages/home/index', ext: { mustLogin: true } })
    

    文档

    tarojs-router 文档

    示例

    Demo(代码)
    Demo(微信开发者工具打开)


登录后回复