鼠标左键急速连点时 vue 路由出现异常，优雅地解决重复点击报错

前言

在 Vue 项目中，使用 Vue Router 来管理路由是一件很常见的事情。但在某些情况下，快速点击菜单时，可能会出现 "Navigation Duplicated" 的错误。这是因为 Vue Router 在 3.0 版本以上对路由导航进行了优化，当连续点击相同的路由时，它会阻止导航。

问题分析

当我们快速点击菜单时，可能会在短时间内连续触发多次路由导航。这会导致 Vue Router 报出 "Navigation Duplicated" 的错误，阻止导航。

解决方案

1. 使用长按功能：

   我们可以使用长按功能来代替点击。长按需要持续按住一段时间才能触发导航，这样可以避免误操作导致的重复点击。

2. 设置间隔时间：

   我们可以设置一个间隔时间，在连续点击时，只有在间隔时间过后才会触发导航。这样可以避免在短时间内连续点击造成的重复点击。

3. 自定义路由判断逻辑：

   我们可以自定义路由判断逻辑，在点击路由时，判断当前路由是否已经激活，如果已经激活，则不触发导航。

以下是实现方法：

1. 长按功能：

   在菜单组件中，使用 @mousedown 和 @mouseup 事件来检测长按。在 @mousedown 事件中，记录下鼠标按下时的 timestamp。在 @mouseup 事件中，如果鼠标按下和松开的时间差超过了设定的阈值，则触发长按事件。

2. 设置间隔时间：

   在菜单组件中，使用 setTimeout() 函数来设置间隔时间。在点击路由时，先检查一下上一次点击的时间戳。如果当前时间与上一次点击的时间戳之差小于设定的间隔时间，则不触发导航。

3. 自定义路由判断逻辑：

   在路由组件中，使用 beforeRouteUpdate() 生命周期钩子来判断当前路由是否已经激活。如果当前路由已经激活，则不触发导航。

总结

以上是解决 Vue 路由重复点击报错的三种方法，您可以根据自己的实际情况选择一种或多种方法来解决这个问题。希望本文能够帮助您解决问题。

更多信息

• Vue Router 文档
• Vue Router 3.0 的新特性
• 如何处理 Vue Router 中的重复点击错误