@tarojsx/history NPM

介绍

一个建立在 Taro3 之上的轻量级路由包装 API, 语法上类似人们熟知的 react-router 中的 history 模块.

简化页面跳转, 不必思考什么时候该用 navigateTo 什么时候该用 switchTab, 自动序列化 query 参数.

提供监听路由变化的能力, 即使是点击页面上的"返回"按钮或使用 <navigator /> 组件.

需求

taro 3.0.0-rc.1 +

用法

import history from '@tarojsx/history'

// 监听路由
const unlisten = history.listen((location, action) => {
    // location 是 Taro 路由参数对象.
    console.log('路由变化:', action, location.path, location.params);
});

/**********
 以下操作在不使用 history 时同样会触发路由变化事件.
 例如:
    Taro.navigateTo
    wx.navigateTo
    <navigator>
    页面返回按钮
 **********/

// 初始页面为 /pages/index

history.push('/pages/list')
// 路由变化: navigateTo '/pages/list'

history.push('/pages/item', { id: 1 })
// 路由变化: navigateTo '/pages/item' { id: 1 }

console.log(`页面栈长度 ${history.length}, 当前页面 ${history.location.path}, 最后动作 ${history.action}.`)
// 页面栈长度 3, 当前页面 /pages/item, 最后动作 navigateTo.

history.goBack()
// 路由变化: navigateBack '/pages/list'

history.replace('/pages/about')
// 路由变化: redirectTo '/pages/about'

history.push('/pages/tabpage')
// 路由变化: switchTab '/pages/tabpage'

// 停止监听
unlisten()