Skip to content

导航路由锁

uni-simple-router 提供了导航路由锁的功能,它可以帮助你在特定情况下阻止路由的跳转,以避免在导航过程中再次进行导航。

在某些情况下,特别是在低端手机或导航过程中需要处理复杂逻辑的情况下,可能会出现用户点击跳转后在视觉上没有立即响应的情况。这会导致用户的误解,以为点击无效,进而再次点击,从而导致目标页面重复进入多次。

为了解决这个问题,uni-simple-router 内部已经使用导航路由锁功能来防止重复的路由导航。在用户点击跳转时,首先锁定导航操作,然后进行必要的处理逻辑。完成处理后,再解除导航锁定,允许后续的导航操作。

路由错误码

  • 0 表示 在导航守卫中返回了 false 终止了导航
  • 1 表示 在导航守卫中返回 unknownType 不能识别的结果
  • 2 表示 正在导航中,禁止重复导航
  • 3 表示 在获取页面栈的时候,页面栈不够 level 获取
  • 4 表示 本次导航的 name 值在路由表中未找到
  • 5 表示 本次导航的 path 值在路由表中未找到
  • 6 表示 本次导航的 namepath 在路由表中未找到
  • 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造成的错误和逻辑混乱。

导航路由锁 has loaded