name: "NavigationDuplicated", message: "Navigating to current location ("/") is not allowed", stack:

vue-router 报错 name: "NavigationDuplicated", message: "Navigating to current location ("/") is not allowed", stack: "Error

报错详细内容如下

log.js?4244:23 [HMR] Waiting for update signal from WDS...
vue-router.esm.js?fe87:16 [vue-router] Named Route 'Main' has a default child route. When navigating to this named route (:to="{name: 'Main'"), the default child route will not be rendered. Remove the name from this route and use the name of the default child route for named links instead.
warn @ vue-router.esm.js?fe87:16
vue-router.esm.js?fe87:2051 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/") is not allowed", stack: "Error↵    at new NavigationDuplicated (webpack-int…al:///./node_modules/vue/dist/vue.esm.js:2187:14)"}
(anonymous) @ vue-router.esm.js?fe87:2051
abort @ vue-router.esm.js?fe87:2082
confirmTransition @ vue-router.esm.js?fe87:2090
transitionTo @ vue-router.esm.js?fe87:2034
push @ vue-router.esm.js?fe87:2459
(anonymous) @ vue-router.esm.js?fe87:2779
push @ vue-router.esm.js?fe87:2778
tohome @ main.vue?512e:57
invokeWithErrorHandling @ vue.esm.js?efeb:1863
invoker @ vue.esm.js?efeb:2188
original._wrapper @ vue.esm.js?efeb:7565

报错原因:vue路由跳转相同的地址,即在当前路由下重复当前路由

解决办法:在自定义的 vue-router.js文件中添加如下内容

const routerPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return routerPush.call(this, location).catch(error => error)
}

效果如下

发布了244 篇原创文章 · 获赞 109 · 访问量 44万+

猜你喜欢

转载自blog.csdn.net/wsjzzcbq/article/details/103706572