主题
导航路由锁
uni-simple-router
提供了导航路由锁的功能,它可以帮助你在特定情况下阻止路由的跳转,以避免在导航过程中再次进行导航。
在某些情况下,特别是在低端手机或导航过程中需要处理复杂逻辑的情况下,可能会出现用户点击跳转后在视觉上没有立即响应的情况。这会导致用户的误解,以为点击无效,进而再次点击,从而导致目标页面重复进入多次。
为了解决这个问题,uni-simple-router
内部已经使用导航路由锁功能来防止重复的路由导航。在用户点击跳转时,首先锁定导航操作,然后进行必要的处理逻辑。完成处理后,再解除导航锁定,允许后续的导航操作。
路由错误码
- 0 表示 在导航守卫中返回了
false
终止了导航 - 1 表示 在导航守卫中返回
unknownType
不能识别的结果 - 2 表示 正在导航中,禁止重复导航
- 3 表示 在获取页面栈的时候,页面栈不够
level
获取 - 4 表示 本次导航的
name
值在路由表中未找到 - 5 表示 本次导航的
path
值在路由表中未找到 - 6 表示 本次导航的
name
及path
在路由表中未找到 - 7 表示 app及小程序端缓存的顶级页面
currentRoute
不存在 可能是插件的问题 - 8 表示 本次导航到了相同的路径下,你可能已经在本路径中
- 9 表示 h5端动态组件加载失败,可能是网络问题,或者是服务器问题
自动解除路由锁
在 uni-simple-router
内部,已经实现了自动加锁和解锁的逻辑。当发生特定情况下的异常时,插件会自动处理并尝试解锁。如果你想进一步配置更多自动解锁的状态,可以按照以下示例进行配置:
ts
// router.js
const router = createRouter({
// 其他配置...
navigateLock:{
// 默认配置即是如下,无需二次配置
autoUnlock:[0,1,3,4,5,6,7,8,9]
},
// 路由配置...
});
在 uni-simple-router
中,当插件处理逻辑过程中发生错误时,会尝试与 autoUnlock
中的自动解锁错误码进行对比。如果错误码包含在 autoUnlock
中,插件会自动进行解锁操作;否则,不会进行任何处理。
如果在导航过程中发生异常退出,并且没有正常完成解锁逻辑,导航会保持锁定状态。在这种情况下,你需要手动在检查路由锁状态的生命周期中进行手动解锁操作。
检查路由锁状态钩子
detectBeforeLock
钩子会在每次检查路由锁状态之前调用,你可以根据传递的参数进一步控制路由锁。
ts
// router.js
const router = createRouter({
// 其他配置...
navigateLock:{
detectBeforeLock:(_this,to,navType)=>{
if(to.name === `force`){
_this.$lockStatus = false
}
}
},
// 路由配置...
});
在 onError
中解锁
在 uni-simple-router
实例上,你可以使用 onError
钩子来处理导航过程中发生的错误。当导航过程中出现错误时,错误码将被传递到该钩子函数中。
使用 onError
钩子可以方便地捕获和处理导航过程中的错误情况。你可以根据错误码来执行相应的逻辑,例如显示错误提示、记录日志等。
以下是一个示例,展示如何使用 onError
钩子处理导航错误:
ts
// router.js
const router = createRouter({
// 路由配置...
});
// 使用 onError 钩子处理导航错误
router.onError((error) => {
console.error('导航错误:', error);
if(error.type === 1){
// 手动对指定状态解除路由锁
router.$lockStatus = false
}
});
常见的错误
错误日志:
js
{
"type": 2,
"msg": "当前页面正在处于跳转状态,请稍后再进行跳转,你可以通过路有锁解除锁定....",
"from": {
// ....
},
"to": {
// ....
}
}
错误原因及解决:
原因:短时间内重复多次点击执行导航
解答:在执行导航时,确保逻辑尽量精简,避免在守卫中包含大量的异步等待逻辑。这是因为在导航过程中处理大量异步逻辑会耗费较长的时间。如果你已经确认逻辑正确性,并且认为异步等待逻辑不会导致问题,可以忽略该错误警告。
原因:本次导航未执行结束,再次发生了新导航
解答:在路由守卫中再次调用导航API来完成重定向是一个常见的错误做法,应该避免这样的操作。如果你想在路由守卫中执行重定向,可以直接在守卫中返回需要重定向的目标信息。通过在路由守卫中返回需要重定向的目标信息,
uni-simple-router
会自动处理重定向,并进行相应的导航跳转。这样可以避免在守卫中多次调用导航API造成的错误和逻辑混乱。