tarojs-router
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.9 • Public • Published

    文档

    快速开始

    API 文档

    安装

    npm install tarojs-router
    # or 
    yarn add tarojs-router

    示例

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

    前言

    最近用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 } })
    单个页面路由中间件

    有的时候只有部分页面需要做一些处理,则可以定义单页面路由中间件,使用方式如下

    Router.navigate({ url: '/pages/home/index', beforeRouteEnter: [AuthCheck], ext: { mustLogin: true } })

    Keywords

    Install

    npm i tarojs-router

    DownloadsWeekly Downloads

    3

    Version

    1.2.9

    License

    MIT

    Unpacked Size

    64 kB

    Total Files

    14

    Last publish

    Collaborators

    • lblblong