uniapp-router

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

目录

• 安装
• 关于Promise
• API
• beforeEach-前置路由守卫
• afterEach-后置路由守卫
• onError-页面不存在
• push-追加栈页面
• replace-替换当前栈页面
• reLaunch-清空页面栈，追加栈页面
• switchTab-跳转到tabbar
• back-回退
• getRoutes-获取页面栈
• route-当前路由信息

安装

将其添加为项目的依赖

$ npm i --save uniapp-router

在 main.js 中编写以下代码：

import router from 'uniapp-router'
app.use(router)

API Promise 化

• 注意：被beforeEach拦截的跳转也会回调catch方法 为了方便开发者，我们给一些跳转的API包装了一层Promise，如 push、 replace、navigateTo、 redirectTo、 reLaunch、switchTab

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 |

示例

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 |

示例

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 | 是否本次启动的首个页面（例如从分享等入口进来，首个页面是开发者配置的分享页面） |

示例

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...等 |

示例

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...等 |

示例

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...等 |

示例

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...等 |

示例

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...等 |

示例

router.back(1)
// 等同于
uni.navigateBack({
	delta: 1
})

getRoutes()

获取当前的页面栈 示例

router.getRoutes()
// 等同于
getCurrentPages()

route()

获取当前路由的实例 示例

router.route()