如何修复Internet Explorer中的NavigationDuplicated错误

Question

我正在开发一个"Vue"；由购买表格组成的应用程序。在所有的浏览器中，它让我完成了一个完整的循环，没有任何问题；张贴"；在表格末尾。另一方面，当我尝试在Internet Explorer中进行流程时，在填写表单的最后一步后，它重定向到下一页，但不加载组件，返回错误"；未捕获(承诺(导航重复：避免了对当前位置的冗余导航："/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

由于Yu Zhou在评论中的帮助，我发现了几个线程，提到了vue路由器版本引起的类似问题。所有人都建议使用3.0版本以下的vue路由器。在我的情况下，我先把它降到2.8，没有什么区别，但后来我把它降低到2.6，问题就解决了。