Vue路由重复点击报错问题及解决

问题描述

在使用Vue开发中，遇到路由跳转时，有可能出现以下问题：

• 多次快速点击同一路由会报错。
• 从当前路由返回到上一路由，再点击返回到当前路由时会报错。

错误通常如下：

NavigationDuplicated{_name: "NavigationDuplicated"}

问题原因

出现该错误，是因为Vue-router默认不允许相同路由的跳转。

在使用Vue-router时，可以通过以下代码的方式进行告警，在路由重复跳转时提示用户：

const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {
        x: 0,
        y: 0
      }
    }
  },
  fallback: true
})

router.beforeEach((to, from, next) => {
  if (to.path === from.path) {
    console.warn('路由跳转失败：目标路由与当前路由相同！');
    return
  }
  next()
})

解决方法

在Vue项目中，解决该问题有两种方式：

方法一：使用catch-all 路由

该方法通过使用 catch-all 路由，来处理多次相同路由的跳转。

在Vue2.x中，使用以下代码来定义catch-all 路由：

{
  path: '*',
  component: NotFoundComponent
}

该方法的作用在于当所有的路由都匹配不到时，就会使用 catch-all 路由来进行处理。

在Vue3.x中，使用以下代码来定义catch-all 路由：

{
  path: '/:catchAll(.*)',
  component: NotFoundComponent
}

方法二：添加disable-keep-alive属性

该方法通过在添加一个属性进行处理。

<router-view :key="$route.fullPath" v-if="$route.meta.keepAlive" />
<router-view v-else :key="$route.fullPath" />

在需要禁用缓存的路由组件中，设置该组件的meta属性中添加disable-keep-alive属性来禁用缓存。

export default {
  name: 'DisableKeepAliveTest',
  meta: {
    disableKeepAlive: true
  },
  // ...
}

示例说明

示例一：使用catch-all 路由

通过使用catch-all 路由来处理路由跳转重复的问题。

在router/index.js中添加以下代码：

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {keepAlive: true}
    },
    {
      path: '/repeat',
      name: 'RepeatRouter',
      component: RepeatRouter,
      meta: {keepAlive: true}
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

在组件RepeatRouter.vue中添加以下代码：

<template>
  <div>
    <p>RepeatRouter</p>
    <button @click="goToRepeat()">跳转到当前路由</button>
  </div>
</template>
<script>
export default {
  name: 'RepeatRouter',
  methods: {
    goToRepeat() {
      this.$router.replace('/repeat')
    }
  }
}
</script>

该代码的作用是：在点击“跳转到当前路由”按钮时，会重复跳转到当前路由。该示例中，我们使用了 catch-all 路由 来解决该问题。

示例二：添加disable-keep-alive属性

通过在组件中设置meta.disableKeepAlive属性来禁用缓存。

在router/index.js中添加以下代码：

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {keepAlive: true}
    },
    {
      path: '/test',
      name: 'TestDisableKeepAlive',
      component: TestDisableKeepAlive,
      meta: {keepAlive: true}
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

在组件TestDisableKeepAlive.vue中添加以下代码：

<template>
  <div>
    <p>Test Disable Keep Alive Component</p>
    <button @click="goToTest()">Go to TestDisableKeepAlive Component</button>
  </div>
</template>

<script>
export default {
  name: 'TestDisableKeepAlive',
  meta: {
    disableKeepAlive: true
  },
  methods: {
    goToTest() {
      this.$router.push('/test')
    }
  }
}
</script>

该代码的作用是：在点击“Go to TestDisableKeepAlive Component”按钮时，会路由跳转到该组件。同时，我们在组件的meta属性中添加了disableKeepAlive属性，来禁用缓存。