大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
使用vue 3.0 写了一个登入页面,再点击登入的时候,第一次点击会没有反应,F12查看接口都调用了但是没有跳转,控制台打印出错:
错误说有异常没有捕获;
这个错误是vue -router 内部的错误,没有进行catch处理导致的;
再vue-router3.0以上的版本新增功能:push和replace方法会返回一个promise;
解决方案:
在vue的router的js中添加下面代码
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// 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
VueRouter.prototype.replace = function push (location, onResolve, onReject) {
if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
return originalReplace.call(this, location).catch(err => err)
}
其中VueRouter是在vue初始化的时候引入的Router,完整代码:router/index.js
import VueRouter from 'vue-router'
Vue.use(VueRouter);
// 解决报错
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
console.log(onReject + onResolve)
// if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => {
console.log(err)
originalPush.call(this, location, onResolve, onReject)
});
}
// replace
VueRouter.prototype.replace = function push (location, onResolve, onReject) {
console.log(onReject + onResolve)
// if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
return originalReplace.call(this, location).catch(err => {
console.log(err)
originalPush.call(this, location, onResolve, onReject)
})
}
.......
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158918.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...