终于找到问题根源了:
(出处:https://stackoverflow.com/questions/58056675/vuejs-navigating-to-current-location-is-not-allowed
)
Finally I understand why it happened. The error you see in the console is part of the new promise api: before, if no callbacks were supplied to router.push, errors were only sent to the global router error handler. Now, because both push and replace return a promise, if the navigation failure (anything that cancels a navigation like a next(false) or next('/other') also counts) is not caught, you will see an error in the console because that promise rejection is not caught. However, the failure was always there because trying to navigate to same location as the current one fails. It's now visible because of the promise being rejected but not caught.
I able to solve this issue with 2 solutions as following. The first solutions is using router-link.
<router-link
to="/Error"
v-slot="{ href, route, navigate, isActive, isExactActive }"
>
</router-link>
The second solutions is add catch in my function
this.$router.replace({
name: 'Error',
query: {
showRefresh: true,
}).catch(err => {})
或者直接将push的捕获错误函数直接挂在router原型上。
这里我还踩了个原型链的小坑,
const router = new VueRouter({
routes,
mode:"history"
})
const Epush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return Epush.call(this, location).catch(data => { })
}
代码里,我曾把函数挂在实例router上,报错找不到push属性,要记得挂在原型上哦
网友评论