README.md · 客户管理/uniapp-router

# uniapp-router
uniapp-router是基于uniapp开发的路由(参考[vue-router](https://router.vuejs.org/zh/))，为开发者提供更方便的路由控制
## 目录
-  [安装](#安装)
-  [关于Promise](#关于Promise)
-  [API](#api)
-  [beforeEach-前置路由守卫](#beforeEach)
-  [afterEach-后置路由守卫](#afterEach)
-  [onError-页面不存在](#onError)
-  [push-追加栈页面](#push)
-  [replace-替换当前栈页面](#replace)
-  [reLaunch-清空页面栈，追加栈页面](#reLaunch)
-  [switchTab-跳转到tabbar](#switchTab)
-  [back-回退](#back)
-  [getRoutes-获取页面栈](#getRoutes)
-  [route-当前路由信息](#route)

## 安装
将其添加为项目的依赖
```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时，调用此回调

**示例**
```Js
router.beforeEach((to, from, next, type)=>{
	if(to.path==='/pages/test/index'){
		// 禁止跳转
		console.log('我被禁止跳转了')
	}else {
		// 允许跳转
		next()
	}
})
```

#### afterEach(callback)
增加全局的导航后置守卫, 当执行了 navigateTo、 redirectTo、 reLaunch,、switchTab后，调用此回调

**示例**
```Js
router.afterEach((to, from, type)=>{
	console.log(`我使用了${type},从${from.route}跳转到了${to.route}`)
})
```

**示例**
```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()
```

客户管理/uniapp-router

简介

发行版

贡献者

近期动态

客户管理/uniapp-router .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

客户管理/uniapp-router