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

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

  • L

    前言

    最近用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（微信开发者工具打开）

    0
登录后回复