Vue 路由器推送错误：避免了到当前位置的冗余导航

Question

有没有办法避免错误：避免冗余导航到当前位置。我需要进行分页，这是方法：

handlePageChange(page: number): void {
  const query = {
    ...this.$route.query,
    page: page.toString(),
  };
  this.$router.push({ name: 'PageName', query });
}

我在控制台中不断收到错误：

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/page-path?page=2".

我尝试用路由器进行捕获，但这不起作用。有人可以帮助我阐明我在这里做错了什么吗？ :/

Answer 1

如果忽略它是安全的，并且你正在使用 vue-router

^3.4.0

，你可以这样做：

import VueRouter from 'vue-router'

const { isNavigationFailure, NavigationFailureType } = VueRouter
...
this.$router.push(fullPath).catch(error => {
  if (!isNavigationFailure(error, NavigationFailureType.duplicated)) {
    throw Error(error)
  }
})

或者全局处理：

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

const { push } = VueRouter.prototype

const { isNavigationFailure, NavigationFailureType } = VueRouter

VueRouter.prototype.push = function (location) {
  return push.call(this, location).catch(error => {
    if (!isNavigationFailure(error, NavigationFailureType.duplicated)) {
      throw Error(error)
    }
  })
}

Vue.use(VueRouter)

更多详情请参阅导航失败。

Answer 2

这有点过时了，但是合并了两个现有的答案以获得更清晰的全局处理：

import VueRouter from "vue-router";
Vue.use(VueRouter);
const { isNavigationFailure, NavigationFailureType } = VueRouter;

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    original_push.call(this, location).catch(error => {
        if(!isNavigationFailure(error, NavigationFailureType.duplicated)) {
            throw Error(error)
        }
    })
};

Answer 3

您可以全局处理这个问题。 打开路由器的索引文件 (index.js) 并在其中使用此代码 -

import VueRouter from "vue-router";
Vue.use(VueRouter);

// Handle navigation duplication for router push (Globally)

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((error) => {
  });
};

尝试这个例子 - 这里

干杯！

Answer 4

您不应该发现广泛的错误。相反，您应该找到问题的根本原因并解决它。在这种情况下，Vue 会抱怨您将应用程序重定向到当前所在的同一页面。 就我而言，问题是另一个功能崩溃了，在那个辅助功能中，我正在推动我当前所在的路线。 我希望这有帮助。