Bug记录前端技术VueNavigationDuplicated异常警告!!!
SerMs问题
Vue路由当你重复传相同参数时,控制台就会报:NavigationDuplicated
![](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
原因:
最新的vue-router引入了promise
解决方法
通过给push方法传递相应的成功,失败的回调,可以捕获当前错误,可以解决问题
1 2 3 4 5 6 7 8 9 10 11 12 13
| this.$router.push({ name: 'search', query: { k: this.keyword.toUpperCase(), }, params: { keyword: this.keyword, },
}, () => { }, //函数传入成功 () => { } //函数传入失败 );
|
重写Router原型对象上的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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| import Vue from 'vue' import Router from 'vue-router'
Vue.use(Router);
let originPush = Router.prototype.push;
let originReplace = Router.prototype.replace;
Router.prototype.push = function (location, resolve, reject) { if (resolve && reject) { return originPush.call(this, location, resolve, reject); } else { return originPush.call(this, location, () => { }, () => { }); } } Router.prototype.replace = function (location, resolve, reject) { if (resolve && reject) { return originReplace.call(this, location, resolve, reject); } else { return originReplace.call(this, location, () => { }, () => { }); } }
export default new Router({ routes: [ { path: '/home', component: Home, meta: { show: true } }, ] })
|
至此push和replace重复提交问题以全部解决
您的支持是我不断前进的动力,如果您恰巧财力雄厚,又感觉本文对您有所帮助的话,可以考虑打赏一下本文,用以维持本博客的运营费用,拒绝白嫖,从你我做起!🥰🥰🥰
支付宝 | 微信 |
---|
![](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) | ![](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) |