解决vue报错问题:重复点击导航栏按钮报vue-router.esm.js?fe87:2065 Uncaught (in promise) NavigationDuplicated: Avoided
重复点击导航栏按钮报Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/recruit”.这两天做项目的时候突然发现在多次点击导航栏按钮时会出现这样的报错,不影响使用,但是身为一名程序员是不允许出现这种情况的。。。如图:在网上百度的方案也挺多的方案一: 在重新
重复点击导航栏按钮报Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/recruit”.
这两天做项目的时候突然发现在多次点击导航栏按钮时会出现这样的报错,不影响使用,但是身为一名程序员是不允许出现这种情况的。。。
如图:
在网上百度的方案也挺多的
方案一: 在重新下载依赖包时,安装的vue-router还是之前出错的那个版本 删除node_modules 从新安装npm i vue-router@3.0 -S
方案二:在跳转时,判断是否跳转路由和当前路由是否一致,避免重复跳转产生问题
if (this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … { this.router.push({ path: item.url })
}
方案三:使用 catch 方法捕获 router.push 异常
this.$router.push(route).catch(err => {
console.log('报错',err)
})
方案四:在 router 文件夹下里面的文件index.js里面找到如下位置
Vue.use(Router)
const router = new Router({
routes
})
找到上面位置,在下面增加这段代码即可。
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to) {
return VueRouterPush.call(this, to).catch(err => err)
}
参考链接:https://blog.csdn.net/qq_36437172/article/details/108269846
方案五:找到Vue.use(Router)进行配置下
import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
更多推荐
所有评论(0)