Vue Router 错误: NavigationDuplicated - 避免重复导航到 /main/introduce
"Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/main/introduce".\n\tat createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2053:15)\n\tat createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2023:15)\n\tat HashHistory.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2340:18)\n\tat HashHistory.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2267:8)\n\tat HashHistory.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2722:10)\n\tat eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3043:24)\n\tat new Promise (this.$router.push()方法进行路由导航,而导航目标与当前活动路由相同。\n\n要解决这个问题,你可以在导航之前添加一些条件判断,以避免重复导航。例如,你可以检查当前活动路由是否与导航目标相同,如果相同,则不执行导航操作。\n\n以下是一个示例代码片段,演示如何避免重复导航:\n\njavascript\nupdateCurUser() {\n // 获取当前活动路由\n const currentRoute = this.$route.path;\n \n // 检查当前活动路由是否与导航目标相同\n if (currentRoute !== '/main/introduce') {\n // 执行路由导航\n this.$router.push('/main/introduce');\n }\n}\n\n\n在此示例中,我们首先获取当前活动路由的路径,然后检查它是否与导航目标"/main/introduce"相同。如果它们不同,我们才执行路由导航操作。\n\n通过这种方式,你可以避免重复导航,并解决这个错误。
原文地址: https://www.cveoy.top/t/topic/p2gt 著作权归作者所有。请勿转载和采集!