如何修复 Internet Explorer 中的 NavigationDuplicated 错误？答案

【问题标题】：How to fix NavigationDuplicated error in Internet Explorer?如何修复 Internet Explorer 中的 NavigationDuplicated 错误？
【发布时间】：2021-01-05 16:37:57
【问题描述】：

我正在开发一个“Vue”应用程序，其中包含一个用于购买的表单。在所有浏览器中，它使我毫无问题地完成了整个循环，并设法在表单末尾进行了“发布”。另一方面，当我尝试在 Internet Explorer 中执行流程时，在填写表单的最后一步后，它会重定向到下一页但不加载组件，返回错误“未捕获（承诺中）NavigationDuplicated：避免了到当前位置的冗余导航：“/devis/resume”。这是我的路由器

import Vue from 'vue'
import Router from 'vue-router'
import Devis from '../components/devis/devis.vue'
import Animal from '../components/devis/animal.vue'
import Create from '../components/devis/create.vue'
import Resume from '../components/devis/resume.vue'
import Service from '../components/devis/service.vue'
import Geo from '../components/extern/geolocalisation.vue'
import Message from '../components/extern/servicenotavailable.vue'



Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Devis, children: [
        {
          path: '/',
          component: Animal
        }
      ]
    },
    {
      path: '/devis',
      component: Devis, children: [
        {
          path: '/',
          component: Animal
        },
        {
          path: 'create',
          component: Create
        },
        {
          path: 'resume',
          component: Resume
        },
        {
          path: 'service',
          component: Service
        }
      ]
    },
    {
      path: '/geo',
      component: Geo
    },
    {
      path: '/message',
      component: Message
    }
  ],
  mode: 'history', 
  scrollBehavior() {
    document.getElementById('app').scrollIntoView();
  }

})

这是我从创建组件重定向到恢复组件的点

    checkForm() {
      
      if (
        this.ownerFormInfo.civility !== "" &&
        this.ownerFormInfo.firstName !== "" &&
        this.ownerFormInfo.lastName !== "" &&
        this.ownerFormInfo.adresse1 !== "" &&
        this.ownerFormInfo.city !== "" &&
        (this.ownerFormInfo.postalCode === "" ||
          (this.ownerFormInfo.postalCode !== "" &&
            this.validatePostalCode(this.ownerFormInfo.postalCode))) &&
        (this.ownerFormInfo.phone === "" ||
          (this.ownerFormInfo.phone !== "" &&
            this.validatePhone(this.ownerFormInfo.phone))) &&
        (this.ownerFormInfo.email === "" ||
          (this.ownerFormInfo.email !== "" &&
            this.validateEmail(this.ownerFormInfo.email)))
      ) {
        this.onSubmit();
      }
    },
    onSubmit() {
      const formData = {
        civility: this.ownerFormInfo.civility,
        firstName: this.ownerFormInfo.firstName,
        lastName: this.ownerFormInfo.lastName,
        adresse1: this.ownerFormInfo.adresse1,
        adresse2: this.ownerFormInfo.adresse2,
        adresse3: this.ownerFormInfo.adresse3,
        city: this.ownerFormInfo.city,
        postalCode: this.ownerFormInfo.postalCode,
        phone: this.ownerFormInfo.phone.indexOf('0') == 0 ? this.ownerFormInfo.phone.replace('0', '+33') : this.ownerFormInfo.phone,
        email: this.ownerFormInfo.email
      };

      const owner = {
        ownerCivility: formData.civility,
        ownerLastname: formData.lastName,
        ownerFirstname: formData.firstName,
        ownerAddressFirstLine: formData.adresse1,
        ownerAddressSecondLine: formData.adresse2,
        ownerAddressThirdLine: formData.adresse3,
        ownerPostalCode: formData.postalCode,
        ownerCity: formData.city,
        ownerPhone: formData.phone,
        ownerEmail: formData.email,
        country: "FR"
      };

      this.$store.dispatch("formOwnerStepInfo", formData);
      const token = localStorage.getItem("token");

      let config = {
        headers: {
          Authorization: "Bearer " + token
        }
      };

      globalAxios
        .post("/api/fr/estimations", owner, config)
        .then(res => {
          if (res.data.functional_id) {
            this.$store.dispatch("setFunctionalId", res.data.functional_id);
          }
        })
        .catch(error => console.log(error));

      this.navigateToResume();
    },
    navigateToResume() {
      this.$store.dispatch("setStep", this.step + 1);
      this.$router.push("/devis/resume");
    },

它怎么能在其他浏览器中正常工作？

我做错了什么？

我一直在寻找信息，但找不到修复错误的方法或将其作为 Internet Explorer 引起的。

您好，感谢大家的宝贵时间和提前帮助

【问题讨论】：

你用的是哪个版本的vue-router？我发现一些有类似问题的线程，他们说问题是由 vue-router 版本引起的。可以尝试使用 3.0 以下版本的 vue-router 看看是否可以工作。此外，请提供a reproducible code sample或在线编辑器中的示例链接，以便我们进行测试，看看如何提供帮助。
hi @YuZhou vue-router 的版本是 "vue-router": "^3.0.1"，我会尝试下载版本看看是否可以使用谢谢
@YuZhou 我已经将路由器版本下载到2.8.1，控制台不再显示错误但组件仍然没有加载。
请提供可以重现问题的最小代码示例。您上面的代码不完整，无法重现。您可以使用一些在线代码编辑器（如 stackblitz、codesandbox 或其他）提供您的示例。
@YuZhou 非常感谢您的回答，我找到了您之前告诉我的关于版本不兼容的参考，并且到2.6.0的路由器故障消失了！

标签： vue.js internet-explorer navigation vue-router

【解决方案1】：

找了几个线程，感谢cmets中宇舟的帮助，参考vue-router版本引起的类似问题。他们都建议使用 3.0 以下版本的 vue-router。在我的情况下，我首先将它降低到 2.8 并且没有任何区别，但后来我将它降低到 2.6 并且问题解决了。

【讨论】：