解决
1 |
Uncaught (in promise) Error: Navigation cancelled from “/Search#1608911018888” to “/Search#1608911019245” with a new navigation. |
这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转,或者在跳转的 mounted/activated 等函数中再次向其他地址跳转时会报错。
push和replace都会导致这个情况的发生
解决方法为在路由中进行如下配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import VueRouter from 'vue-router'; Vue.use(VueRouter); //解决编程式路由往同一地址跳转时会报错的情况 const rop = VueRouter.prototype.push; const ror = VueRouter.prototype.replace; //push VueRouter.prototype.push = function (location, onResolve, onReject) { if (onResolve || onReject) return rop.call(this, location, onResolve, onReject) return rop.call(this, location).catch(err => err) }; //replace VueRouter.prototype.replace = function (location, onResolve, onReject) { if (onResolve || onReject) return ror.call(this, location, onResolve, onReject) return ror.call(this, location).catch(err => err) }; .............................. new Vue({ el: '#q-app', router: router, }); |