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()