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 } })
文档
示例