uniapp-router

uniapp路由守卫及其他Api

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
uniapp-router
1.1.14 months ago4 months agoMinified + gzip package size for uniapp-router in KB

Readme

uniapp-router
uniapp-router是基于uniapp开发的路由(参考vue-router),为开发者提供更方便的路由控制

目录

安装

将其添加为项目的依赖 ```sh $ npm i --save uniapp-router ``` 在 main.js 中编写以下代码: ```javascript import router from 'uniapp-router' app.use(router) ```

API Promise

  • 注意:被beforeEach拦截的跳转也会回调catch方法
为了方便开发者,我们给一些跳转的API包装了一层Promise,如 push、 replace、navigateTo、 redirectTo、 reLaunch、switchTab ```Js router.push('/pages/test/index') // 跳转成功回调 .then(res=>{}) // 失败回调 .catch(err=>{}) // 原生的navigateTo也可以使用 uni.navigateTo({ url:'/pages/test/index' }) .then(res=>{}) .catch(err=>{}) ```

API

beforeEach(callback)

增加全局的导航前置守卫, 当执行了 navigateTo、 redirectTo、 reLaunch、switchTab时,调用此回调 | 属性 | 类型 |描述 | |-|-|-| | callback | Function |回调函数,触发跳转时回调 | | to | Objecet | 即将要进入的目标 | | from | Objecet | 当前导航正要离开的路由 | | next | Function | 回调以验证导航,保证路由正确跳转 | | type | String | 路由跳转方式 navigateTo、 redirectTo、 reLaunch、switchTab | 示例 ```Js router.beforeEach((to, from, next, type)=>{
if(to.path==='/pages/test/index'){
// 禁止跳转
console.log('我被禁止跳转了')
}else {
// 允许跳转
next()
}
}) ```

afterEach(callback)

增加全局的导航后置守卫, 当执行了 navigateTo、 redirectTo、 reLaunch,、switchTab后,调用此回调 | 属性 | 类型 |描述 | |-|-|-| | callback | Function |回调函数,触发跳转时回调 | | to | Objecet | 即将要进入的目标 | | from | Objecet | 当前导航正要离开的路由 | | type | String | 路由跳转方式 navigateTo、 redirectTo、 reLaunch、switchTab | 示例 ```Js router.afterEach((to, from, type)=>{
console.log(`我使用了${type},从${from.route}跳转到了${to.route}`)
}) ```

onError(callback)

onError会调用uni.onPageNotFound方法 监听应用要打开的页面不存在事件 | 属性 | 类型 | 描述 | |-|-|-| | callback | Function | 回调函数 | | path | String | 不存在页面的路径 (代码包路径) | | query | Object | 打开不存在页面的 query 参数 | | isEntryPage | Boolean | 是否本次启动的首个页面(例如从分享等入口进来,首个页面是开发者配置的分享页面) | 示例 ```Js router.onError((path, query, isEntryPage)=>{ }) // 等同于 uni.onPageNotFound((path, query, isEntryPage)=>{ }) ```

push(url, data, other)

push会调用uni.navigateTo方法 | 属性 | 类型 | 必填 | 描述 | |-|-|-|-| | url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 | | data | Objecet | 否 | 参数对象 | | other | Objecet | 否 | 其他选项配置,如: animationType、success、fail...等 | 示例 ```Js router.push('/pages/test/index', {
name:'test' 
},{
success:e=>{}
}) // 等同于 uni.navigateTo({
url:'/pages/test/index?name=test',
success:e=>{}
}) ```

replace(url, data, other)

replace会调用uni.redirectTo方法 | 属性 | 类型 | 必填 | 描述 | |-|-|-|-| | url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 | | data | Objecet | 否 | 参数对象 | | other | Objecet | 否 | 其他选项配置,如: success、fail...等 | 示例 ```Js router.replace('/pages/test/index', {
name:'test' 
},{
success:e=>{}
}) // 等同于 uni.redirectTo({
url:'/pages/test/index?name=test',
success:e=>{}
}) ```

reLaunch(url, data, other)

reLaunch会调用uni.reLaunch方法 | 属性 | 类型 | 必填 | 描述 | |-|-|-|-| | url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 | | data | Objecet | 否 | 参数对象 | | other | Objecet | 否 | 其他选项配置,如: success、fail...等 | 示例 ```Js router.reLaunch('/pages/test/index', {
name:'test' 
},{
success:e=>{}
}) // 等同于 uni.reLaunch({
url:'/pages/test/index?name=test',
success:e=>{}
}) ```

switchTab(url, other)

switchTab会调用uni.switchTab方法 | 属性 | 类型 | 必填 | 描述 | |-|-|-|-| | url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 | | other | Objecet | 否 | 其他选项配置,如: success、fail...等 | 示例 ```Js router.switchTab('/pages/test/index', {
success:e=>{}
}) // 等同于 uni.switchTab({
url:'/pages/test/index?name=test',
success:e=>{}
}) ```

back(delta, other)

switchTab会调用uni.switchTab方法 | 属性 | 类型 | 必填 | 默认值 |描述 | |-|-|-|-|-| | delta | Number | 否 | 1 |需要跳转的应用内非 tabBar 的页面的路径 | | other | Objecet | 否 | |其他选项配置,如: success、fail...等 | 示例 ```Js router.back(1) // 等同于 uni.navigateBack({
delta: 1
}) ```

getRoutes()

获取当前的页面栈 示例 ```Js router.getRoutes() // 等同于 getCurrentPages() ```

route()

获取当前路由的实例 示例 ```Js router.route() ```