問題描述

在升級了Vue-Router版本到到3.1.0及以上之后，頁面在跳轉(zhuǎn)路由控制臺會報Uncaught (in promise) Error的問題?

Vue更新日志

https://github.com/vuejs/vue-router/releases?

V3.1.0版本里面新增功能：push和replace方法會返回一個promise, 你可能在控制臺看到未捕獲的異常

問題分析

解釋：沒有捕獲異常。?

解決方案?

方法一： 檢查代碼

1、首先檢查router.js中的路由path和name是否有誤

2、查看main.js中的路由beforeEach導(dǎo)航守衛(wèi)的路由跳轉(zhuǎn)是否寫錯。

方法二：回退版本

在項目目錄下運行

npm i vue-router@3.0 -S

將vue-router改為3.0版本即可；?

方法三：捕獲異常

1、在調(diào)用方法的時候用catch捕獲異常?

this.$router.replace({ name: 'foo' }).catch(err => {console.log('all good') })

2、對Router原型鏈上的push、replace方法進(jìn)行重寫，這樣就不用每次調(diào)用方法都要加上catch。

這個方法是vue-router的issues里面的一位大佬解決的

// 解決Vue-Router升級導(dǎo)致的Uncaught(in promise) navigation guard問題 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location, onResolve, onReject) {if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)return originalPush.call(this, location).catch(err => err) }

?replace方法同上

// 解決Vue-Router升級導(dǎo)致的Uncaught(in promise) navigation guard問題 const originalReplace = VueRouter.prototype.replace VueRouter.prototype.replace = function replace (location, onResolve, onReject) {if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)return originalPush.call(this, location).catch(err => err) }

?

參考文章

https://blog.csdn.net/haidong55/article/details/100939076

https://forum.vuejs.org/t/topic/97260

https://www.cnblogs.com/xinheng/p/13019818.html

https://blog.csdn.net/ShIcily/article/details/102668403

https://blog.csdn.net/sunrj_niu/article/details/106902138

https://blog.csdn.net/Jone_hui/article/details/107411530

https://blog.csdn.net/qq_37875903/article/details/107494973

https://segmentfault.com/q/1010000019723749

總結(jié)

以上是生活随笔為你收集整理的Vue——Vue-Router的push和replace方法[Uncaught (in promise) Error]解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。