为何要做这个?
当时一开始接触小程序,就总觉得每次路由传参要写一个对象贼难受,就不能直接传入一个 string 的 url 就好吗?更难受的是每次我要跳转路由,比如跳转到 xxx
,我总需要写上前缀 /pages
和后缀 /index
,这是我无法忍受的。只会逼逼没什么用,还是要拿出实际行动,于是就做了这个库 taro-history。
以下是对应的 readme,如果有兴趣的话,不妨往下看看,如果能帮助到你,请给下 star✨,那将是我莫大的荣幸~
taro-history
⌨️ 安装
yarn add taro-history
# or
npm i taro-history
复制代码
✨ api
app.config.js
的例子
export default {
// 页面路径列表
pages: ['pages/xxx/index', 'pages/yyy/index'],
// 底部 tab 栏的表现
tabBar: {
list: [
{
pagePath: 'pages/tab1/index',
text: 'tab1',
},
],
},
...
}
复制代码
- 将 navigateTo 和 switchTab 合到 push 中
import history from 'taro-history'
// 将 navigateTo 和 switchTab 合到 push 中
// 1. push 到 pages/xxx/index
history.push('pages/xxx/index')
history.push('/pages/xxx/index')
history.push('xxx')
// 携带参数
history.push('xxx?a=1')
history.push({ url: 'xxx?a=1' })
history.push({ url: 'pages/xxx/index?a=1' })
history.push({ url: '/pages/xxx/index?a=1' })
// push 到 tab的 pages/tab1/index
history.push('/pages/tab1/index')
history.push('pages/tab1/index')
history.push('tab1')
// 携带参数
history.push('tab1?a=1')
history.push({url: 'tab1?a=1' })
history.push({url: 'pages/tab1?a=1' })
history.push({url: '/pages/tab1?a=1' })
复制代码
pushBind
,避免写成回调的形式,使代码更优雅
<Button onClick={history.pushBind('xxx?a=1&is=true')}>跳转</Button>
复制代码
redirect
、reLaunch
和navigateBack
// `redirect`、`reLaunch` 都支持short url 和 full url,其他用法和 push 类似
history.redirect('pages/xxx/index')
history.redirect('/pages/xxx/index')
history.redirect('xxx')
history.redirect('xxx?a=1')
history.redirect({ url: 'xxx?a=1' })
history.redirect({ url: 'pages/xxx/index?a=1' })
history.redirect({ url: '/pages/xxx/index?a=1' })
history.reLaunch('pages/xxx/index')
history.reLaunch('/pages/xxx/index')
history.reLaunch('xxx')
history.reLaunch('xxx?a=1')
history.reLaunch({ url: 'xxx?a=1' })
history.reLaunch({ url: 'pages/xxx/index?a=1' })
history.reLaunch({ url: '/pages/xxx/index?a=1' })
// 返回
history.navigateBack()
复制代码
history.addInterceptor
支持拦截路由,只要有一个拦截了,那么路由就不会执行
import history from 'taro-history'
<Button onClick={() => history.push('xxx?a=1&is=true')}>跳转</Button>
/**
* @description: 接收回调,返回true表示拦截,false表示不拦截
* @param {short} 短路径
* @param {full} 全路径
* @param {Record<string, unknown>} params 传参
*/
// 返回了true表示拦截路由,那么就不会跳转了
const cancelIntercept = history.addInterceptor({ short, full, params } => {
/**
* 上面push到'xxx?a=1&b=2',那么:
* {
* short: 'xxx',
* full: '/pages/xxx/index?a=1&b=2',
* params: {
* a: 1,
* is: true,
* }
* }
* */
console.log(short, full, params)
return true
})
// 去掉拦截
cancelIntercept()
// 返回了false表示不拦截路由
history.addInterceptor({ short, full, params } => {
console.log(short, full, params)
return true
})
// 支持返回promise,resolve(true)表示拦截,resolve(false)表示不拦截
history.addInterceptor({ short, full, params } => {
return new Promise(resolve => {
// 比如跳转前需要调用接口判断是否有权限,那么请求接口后才判断是否跳转
setTimeout(() => {
resolve(true)
}, 3000)
})
})
复制代码
history.addListener
监听路由,在路由不被拦截的情况下才会执行
import history from 'taro-history'
/**
* @description: 监听路由
* @param {short} 短路径
* @param {full} 全路径
* @param {Record<string, unknown>} params 传参
* @return {*}
* @memberof:
*/
// 返回了true表示拦截路由,那么就不会跳转了
const unListener = history.addListener({ short, full, params } => {
// 参数和addInterceptor的回调一样
console.log(short, full, params)
return true
})
// 取消监听
unListener()
复制代码
utils
- 获取路径传参
import { getParams } from 'taro-history'
// history.push('xxx?a=1&is=true')
// a = 1, is = true
const { a, is } = getParams<{a: number, is: boolean}>()
复制代码
- 获取当前路径
import { getPath } from 'taro-history'
// 当前路径为 /pages/xxx/index
const path = getPath()
复制代码
- 是否是当前路径
// 当前路径为 /pages/xxx/index
import { getPath } from 'taro-history'
console.log(isCurrentPath('/pages/xxx/index')) // true
console.log(isCurrentPath('pages/xxx/index')) // true
console.log(isCurrentPath('xxx/index')) // true
console.log(isCurrentPath('xxx')) // true
console.log(isCurrentPath('/pages/yyy/index')) // false
复制代码
- 为路径加上前缀/pages/ 和后缀 /index
import { addPathWithPageAndIndex } from 'taro-history'
console.log(addPathWithPageAndIndex('xxx?a=1')) // /pages/xxx/index?a=1
复制代码
getShortPath
, 获取短路径
import { getShortPath } from 'taro-history'
/**
* @description: 获取短路径
* @param {string} originPath 长路径,如/pages/xxx/index
* @return {string} 短路径,如xxx
*/
console.log(getShortPath('pages/main/invite/index')) // xxx
复制代码
getCurrentShortPath
, 获取当前页短路径
import { getCurrentShortPath } from 'taro-history'
// 当前页 pages/xxx/index
console.log(getCurrentShortPath()) // xxx
复制代码
结尾
以上就是对应的 api 和 util 的例子的,如果还有什么不明白,或者还请在评论区留言~