[Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current loca

简介: [Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current loca

一、前言

跳转网页的两种方式:
  1. 声明式导航:利用a标签跳转
<a href="" target="">文字或图片</a>

_blank表示跳到新页面打开,打开一个新窗口

_self表示当前页面打开链接

_parent表示在父集框架中打开

_top表示在整个窗口中打开

framename表示在指定的框架中打开

  1. 编程式导航:利用js跳转网页

this.$router.push( { path:‘/路径’, query: {参数名:值} } )

this.$router.push( { name:‘名称’, params: {参数名:值} } )

获取:this.$route.query/params.参数名

二、问题

路由运用編程式导航,一直点击同一个按钮报错
vue重复点击相同路由报错

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Avoided redundant navigation to current location: “/welcome”.”

三、解决

第一种:封装jump方法实现跳转

// minins.js文件
import Vue from "vue";
Vue.mixin({
    methods: {
        jump(path) {
            if(path === this.$route.path) return
            return this.$router.push(path)
        }
    }
})

第二种:修改原型方法

解决前语句:

this.$router.push({ path: ‘/welcome’ })

解决后语句:

this.$router.push({ path: ‘/welcome’ },onComplete => {},

onAbort => {})

意思详见Vue Router官网:https://router.vuejs.org/zh/guide/essentials/navigation.html

最后问题就解决了

目录
相关文章
|
12天前
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
20 1
|
12天前
|
JSON 前端开发 JavaScript
浅谈JavaScript中的Promise、Async和Await
【10月更文挑战第30天】Promise、Async和Await是JavaScript中强大的异步编程工具,它们各自具有独特的优势和适用场景,开发者可以根据具体的项目需求和代码风格选择合适的方式来处理异步操作,从而编写出更加高效、可读和易于维护的JavaScript代码。
19 1
|
1月前
|
前端开发 JavaScript
setTimeout、Promise、Async/Await 的区别
`setTimeout` 是用于延迟执行函数的简单方法;`Promise` 表示异步操作的最终完成或失败;`Async/Await` 是基于 Promise 的语法糖,使异步代码更易读和维护。三者都用于处理异步操作,但使用场景和语法有所不同。
|
1月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:深入了解 Promise 和 async/await
【10月更文挑战第8天】JavaScript 中的异步编程:深入了解 Promise 和 async/await
|
1月前
|
前端开发 JavaScript UED
深入了解JavaScript异步编程:回调、Promise与async/await
【10月更文挑战第11天】深入了解JavaScript异步编程:回调、Promise与async/await
11 0
|
2月前
|
前端开发 JavaScript
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
该文章教授了如何使用Promise和async/await来解决异步编程问题,从而避免回调地狱,使代码更加清晰和易于管理。
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
|
4月前
|
前端开发 JavaScript
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
135 1
|
3月前
|
前端开发 JavaScript
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
55 0
|
3月前
|
前端开发 JavaScript 开发者
探索前端开发中的异步编程:Promise与Async/Await
在现代前端开发中,处理异步操作是至关重要的。本文将深入探讨异步编程的核心概念,重点比较JavaScript中的Promise与Async/Await两种异步编程方式。通过实例和比较,读者将能够理解这两种方法的优缺点,如何在实际开发中选择适合的异步编程模式,从而编写更简洁、可维护的代码。
|
4月前
|
前端开发 JavaScript
JavaScript异步编程:Promise与async/await的深入探索
【7月更文挑战第9天】Promise和async/await是JavaScript中处理异步编程的两大利器。Promise为异步操作提供了统一的接口和链式调用的能力,而async/await则在此基础上进一步简化了异步代码的书写和阅读。掌握它们,将使我们能够更加高效地编写出清晰、健壮的异步JavaScript代码。