[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

最后问题就解决了

目录
相关文章
|
21天前
|
前端开发 JavaScript
setTimeout、Promise、Async/Await 的区别
`setTimeout` 是用于延迟执行函数的简单方法;`Promise` 表示异步操作的最终完成或失败;`Async/Await` 是基于 Promise 的语法糖,使异步代码更易读和维护。三者都用于处理异步操作,但使用场景和语法有所不同。
|
21天前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:深入了解 Promise 和 async/await
【10月更文挑战第8天】JavaScript 中的异步编程:深入了解 Promise 和 async/await
|
18天前
|
前端开发 JavaScript UED
深入了解JavaScript异步编程:回调、Promise与async/await
【10月更文挑战第11天】深入了解JavaScript异步编程:回调、Promise与async/await
10 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 异步使用总结
127 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
40 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代码。
|
4月前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
187 1
|
4月前
|
前端开发 小程序 API
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
61 0