uniapp-router

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

目录

• 安装

• 关于Promise

• API

• beforeEach-前置路由守卫

• afterEach-后置路由守卫

• onError-页面不存在

• push-追加栈页面

• replace-替换当前栈页面

• reLaunch-清空页面栈，追加栈页面

• switchTab-跳转到tabbar

• back-回退

• getRoutes-获取页面栈

• 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时，调用此回调 | 属性 | 类型 |描述 | |-|-|-| | 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() ```