前言

最近用Taro開發(fā)小程序發(fā)現(xiàn)一些不好用的地方：

• 頁面?zhèn)鲄⑿枰謩?dòng)拼接 url
• 頁面?zhèn)鲄o法攜帶大量任意類型數(shù)據(jù)
• 跳頁面取值比較麻煩（比如填寫表單跳頁面選擇城市，往往需要全局存儲(chǔ)，回到頁面再去取，也可以通過event，但是總要寫很多代碼）

為了實(shí)現(xiàn)上面的需求更方便，于是封裝了一下：tarojs-router

看看 tarojs-router 如何解決上面的問題

一、頁面?zhèn)鲄?/h4>

// ? 手動(dòng)拼接路徑，無法傳任意類型，數(shù)據(jù)量有限制
Taro.navigateTo({
  url: '/pages/user/index?name=李四&id=1',
})

// ? tarojs-router 自動(dòng)拼接，可傳任意類型任意大小的數(shù)據(jù)
Router.navigate(
  { url: '/pages/user/index' },
  {
    // url 參數(shù)，自動(dòng)拼接
    params: { id: 1, name: '李四' },
    // 可攜帶其他數(shù)據(jù)，任意類型
    data: [1, 2, 3, 4],
  }
)

// 目標(biāo)頁面獲取數(shù)據(jù)，函數(shù)組件：
const { params, data } = useRouter()
// 目標(biāo)頁面獲取數(shù)據(jù)，Class 組件：
const data = Router.getData()
const params = getCurrentInstance().router?.params

二、跳頁面取值

實(shí)現(xiàn)這種需求，簡(jiǎn)單做法是跳轉(zhuǎn)過去后把選中的值全局存儲(chǔ)起來，回到頁面后再去取，自己實(shí)現(xiàn)這個(gè)過程比較麻煩

熟悉flutter的可能知道

// 跳轉(zhuǎn)到目標(biāo)頁面
final cityData = await Navigator.push(...)

// 返回值到上一個(gè)頁面
Navigator.pop({cityName: '深圳', adcode: 'xxxx'})

tarojs-router 中寫法基本一致，內(nèi)部通過 promise 實(shí)現(xiàn)

// ? tarojs-router 封裝了這個(gè)過程，直接使用
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 一致的路由中間件功能

image

// 實(shí)現(xiàn)一個(gè)登錄檢查的路由中間件
// 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: '請(qǐng)先登錄',
      })
      if (confirm) toLogin()
      throw Error('該頁面必須要登陸：' + ctx.route.url)
    }
  }
  await next()
}

// router.ts
Router.config({
  middlewares: [AuthCheck],
})

// ext 攜帶 mustLogin 并且為 true 則會(huì)檢查 token，token 不存在則跳轉(zhuǎn)登錄
Router.navigate({ url: '/pages/home/index', ext: { mustLogin: true } })

文檔

tarojs-router 文檔

示例

Demo（代碼）
Demo（微信開發(fā)者工具打開）