javascript - 在 guard 中检测导航中止/取消

Question

目前预计导航已确认，所以beforeEach和 afterEach全局守卫被触发。 showSpinner和 hideSpinner应该在每个导航上成对调用。

router.beforeEach((to, from, next) => {
  showSpinner();
  next();
}

router.afterEach((to, from) => {
  // This line can be never called
  hideSpinner();
});

据我所知，导航结果无法通过 next 获得在 guard 。
然后在另一个地方导航被取消了，所以它停留在之前的路线上，afterEach未触发(同样可能适用于导航中止):

beforeRouteEnter() {
  ...
  next(false);
}

结果是 afterEach和 hideSpinner没有被触发。
Vue Router 3.4.9 和 Vue 2.6 会发生这种情况。
如何解决？

Answer 1

似乎没有内置方法可以从取消的导航中获取中止事件。
然而，深入研究 vue-router的代码我发现每一个到路由的转换都是在 router.history 中处理的。通过 transitionTo函数接受作为第三个参数的 abort 函数，该函数在导航未被确认时调用。可以通过覆盖此函数来拦截该事件。
我确信这段代码会受到一些批评，但它可能会在这里提出一些想法。

const transitionTo = Object.getPrototypeOf(router.history).transitionTo;

Object.getPrototypeOf(router.history).transitionTo = function (...args) {
  const abortFn = args[2] && new Function("return " + args[2].toString());
  args[2] = (err) => {
    // eventBus.$emit("hide-spinner"); // or any other method to hide the spinner
    console.log("Aborted", err);
    abortFn && abortFn(err);
  };
  transitionTo.apply(router.history, args);
};

这是一个有效的codesandbox