编程式路由跳转到当前路由, 控制台抛出NavigationDuplicated的错误
2023-09-11 14:20:08 时间
router.push 的语法规则如下:
router.push(location(导航路径), onComplete(成功的回调)?, onAbort?(失败的回调))
router.push(location).then(onComplete).catch(onAbort)
router.replace 的语法规则如下:
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
解决方案一:
methods: {
//执行 toSearch() 方法后,跳转路由
toSearch(){
this.$router.push('/search') //————重复点击会报错:NavigationDuplicated
//解决方法如下:
this.$router.push('/search' , ()=>{})
//或者
this.$router.push('/search' , undefined , ()=>{})
//或者
this.$router.push('/search') .catch(()=>{})
}
}
解决方案二:
每次调用push 或者 replace 方法都要写回调函数,很麻烦,因此可以在Vue原型上重构这两个方法,重构时给两个回调函数其中一个指定默认值或者指定catch
1 import Vue from 'vue' 2 import VueRouter from 'vue-router' 3 Vue.use(VueRouter) 4 5 6 //终极解决多次触发push或者repalce,报错的问题 7 //NavigationDuplicated 8 9 const originPush = VueRouter.prototype.push 10 const originReplace = VueRouter.prototype.replace 11 12 //location为传过来的对象 13 VueRouter.prototype.push = function(location,onResolved,onRejected){ 14 if(onResolved === undefined && onRejected === undefined){ 15 // originPush.call目的是让VueRouter实例化对象去调用‘ 16 //如果不加,那就是window在调用 17 return originPush.call(this,location).catch(() => {}) 18 }else{ 19 return originPush.call(this,location,onResolved,onRejected) 20 } 21 } 22 23 VueRouter.prototype.replace = function(location,onResolved,onRejected){ 24 if(onResolved === undefined && onRejected === undefined){ 25 // originPush.call目的是让VueRouter实例化对象去调用‘ 26 //如果不加,那就是window在调用 27 return originReplace.call(this,location).catch(() => {}) 28 }else{ 29 return originReplace.call(this,location,onResolved,onRejected) 30 } 31 } 32 33 34 import routes from '@/router/routes' 35 36 export default new VueRouter({ 37 routes 38 })
原文链接:https://blog.csdn.net/qq_38763173/article/details/105349152
相关文章
- git 合并遇到冲突或错误后取消合并
- SSRS 2008 R2 错误:Timeout expired. The timeout period
- 多数公司容易犯的5个大数据错误
- too many positional arguments错误
- 思维导图Minimanager9 “参数错误”问题
- 0,1,2 代表标准输入、标准输出、标准错误
- 如何通过单步调试的方式找到引起 Fiori Launchpad 路由错误的原因试读版
- U8 登入点单据出现Automation错误
- 使用application log分析Fiori navigation target解析错误
- Angular路由错误消息 - router-outlet is not a known element
- 如何处理Angular依赖注入的错误消息: NullInjectorError No provider for EffectsRootModule!
- 使用 Go 编程语言 66 个陷阱:Golang 开发者的陷阱和常见错误指北
- 全网多种方法解决由于被认为是客户端对错误(例如:畸形的请求语法、无效的请求信息帧或者虚拟的请求路由),服务器无法或不会处理当前请求的错误
- 解决MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.TooManyResultsException错误
- 【错误记录】Android Studio 真机运行 Apk 应用报错 ( The application could not be installed: SHELL_UNRESPONSIVE )
- 【错误记录】p7zip 交叉编译 Android 版本 NDK 报错 ( Application.mk | APP_ABI := armeabi-v7a arm64-v8a x86 x86_64 )
- UserControl 的一个值得注意的问题 [属性" * "的代码生成失败.错误是:"程序集"*.Version=1.0.0.0,Culture=neutral,..........无标记为序列化"
- c++ clr编译dll在c#调用时出现“试图加载不正确的格式”“找不到dll”错误的解决
- Win10应用商店无法加载错误0x80072F7D怎么办?
- MySQL 8 连接时出现 1251 和 2059 错误
- ssh配置互信时错误解决方法
- 8. OD-输入错误的信息注册未注册的软件