vue-router beforeEach 导航守卫错误：

Question

我遇到了与 this stackoverflow question 类似的问题，但那里提到的所有解决方案都不适用于我。我的情况有什么不同？

我在“团队”页面上。在我的应用程序中单击导航栏中的链接时，会调用 router.push({name: "polls"}) 以导航到“投票”页面。但我随后收到错误消息，导航被取消。为什么？

错误信息

Uncaught (in promise) Error: Navigation cancelled from "/team" to "/polls" with a new navigation.
    at createRouterError (vue-router.esm.js:2065)
    at createNavigationCancelledError (vue-router.esm.js:2047)
    at vue-router.esm.js:2394
    at step (vue-router.esm.js:2001)
    at step (vue-router.esm.js:2008)
    at runQueue (vue-router.esm.js:2012)

我有一个非常复杂的 beforeEach() 路线导航守卫：

    router.beforeEach((routeTo, routeFrom, next) => {
        //Keep in mind that next() must exactly be called once in this method.
        console.log("beforeEach ENTER", routeFrom.path, "=>", routeTo.path)
        tryToAuthenticate().then(() => {
            log.debug("vue-router: authenticated", routeFrom.path, "=>", routeTo.path)
            if (routeTo.path === "/" || routeTo.path === "/index.html") {
                next({name: "teamHome"})
            } else {
                next()
            }
        }).catch(() => {
            log.debug("vue-router: anonymous", routeFrom.path, "=>", routeTo.path)
            if (routeTo.meta.public) {
                next()
            } else if (routeTo.path === "/" || routeTo.path === "/index.html") {
                next({name: "welcome"})
            }   else {      
                next({name: "login"})
            }
        })
    })

当用户已经通过身份验证并且 JWT 存储在 localStorage 中时，tryToAuthenticated() 方法返回一个承诺。情况就是这样。在我的测试用例中，用户已登录。

即使我删除了所有这些，并且只在 beforeEach Hook 中对 next() 进行了默认调用，我仍然遇到相同的错误。

我在其他问题中尝试了所有建议的解决方案：

• 捕获返回的错误：router.push('/polls').catch(() => {}); => 这会捕获错误，但页面仍然没有切换到预期的目标页面“民意调查”。
• 用有效的 <router-link :to="{name: 'polls'}"> 替换 router.push
• 趣闻：点击按钮两次同样有效。

调试

错误出现在vue-router.esm.js的这个方法

    runQueue(queue, iterator, function () {
        // wait until async components are resolved before
        // extracting in-component enter guards
        var enterGuards = extractEnterGuards(activated);
        var queue = enterGuards.concat(this$1.router.resolveHooks);
        runQueue(queue, iterator, function () {   
          if (this$1.pending !== route) {           // <=================================
            return abort(createNavigationCancelledError(current, route))
          }
          this$1.pending = null;
          onComplete(route);

this$1.pending 仍然具有 旧 页面（“teams”）的值，并且路由指向我想要导航到的页面（“polls”）。为什么还有待处理？？？？

---

好的似乎与动态/异步组件有关。我的投票页面是一个异步组件。替换为正常导入的组件，然后它就可以工作了。看起来像是 vue-router 异步行为中的一个错误