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

Question

我正在开发一个“Vue”应用程序，其中包含一个用于购买的表单。在所有浏览器中，它让我毫无问题地完成了整个循环，设法在表单末尾制作了“post”。另一方面，当我尝试在 Internet Explorer 中执行流程时，在填写表单的最后一步后，它重定向到下一页但不加载组件，返回错误“Uncaught (in promise) 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 的方法。

问候并感谢大家的时间和提前帮助

Answer 1

找了好几个帖子，多亏了余舟在评论中的帮助，参考了vue-router版本引起的类似问题。他们都建议使用3.0以下的vue-router。在我的情况下，我先将它降低到 2.8，没有任何区别，但后来我将它降低到 2.6，问题就解决了。

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

How to fix NavigationDuplicated error in Internet Explorer?

navigation

internet-explorer

vue.js

vue-router