Vue路由重复点击报错如何解决

在Vue项目中，当我们在路由中重复点击同一个链接时，有时会遇到“重复触发导航错误”。这个错误的原因是因为Vue默认情况下不允许在当前路由和目标路由相同的情况下再次点击该链接。这种错误通常会给用户造成困惑，因此我们需要解决这个问题。 一种解决方法是使用Vue Router提供的`vue-router`导航守卫来解决这个问题。我们可以使用`beforeEach`导航守卫来检测当前路由和目标路由是否相同，如果相同则进行相应处理。下面是一个示例代码： ```html

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  // 路由配置
})

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => {
    if (err.name === 'NavigationDuplicated' && err.message.includes('Avoided redundant navigation to current location')) {
      // 重复点击了相同路由，进行一些处理，比如给出提示
      console.log('请不要重复点击相同的链接')
    } else {
      throw err
    }
  })
}

export default router

在上面的代码中，我们通过重新定义`push`方法，并添加导航守卫来捕获重复点击相同链接的错误。通过检查错误的类型和消息，我们可以确定是否是由于重复点击导致的错误，并执行相应的处理。 需要注意的是，在vue-router的3.1.0版本之前，并没有提供`NavigationDuplicated`错误的捕获机制，此时可以使用以下代码来处理重复点击问题： ```html

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  // 路由配置
})

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => {
    if (err.name === 'NavigationDuplicated') {
      // 重复点击了相同路由，进行一些处理，比如给出提示
      console.log('请不要重复点击相同的链接')
    } else {
      throw err
    }
  })
}

export default router

以上是解决重复点击路由报错的一种方法，通过导航守卫捕获错误并进行处理，给出相应的提示信息，以提升用户体验。 总结起来，解决Vue路由重复点击报错的方法就是通过导航守卫来检测当前路由和目标路由是否相同，并给出相应的处理。我们可以重新定义`push`方法，捕获重复点击报错，并进行处理。这样可以避免用户重复点击相同的链接而造成的困惑。希望以上解决方法对你有所帮助。