[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

最后问题就解决了

目录
相关文章
|
30天前
|
前端开发 JavaScript
Promise、async和await
Promise、async和await
19 0
|
30天前
|
前端开发
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
|
30天前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
|
2天前
|
JSON 前端开发 JavaScript
ES6引入Promise和async/await解决异步问题
【6月更文挑战第12天】ES6引入Promise和async/await解决异步问题。Promise处理异步操作,有pending、fulfilled、rejected三种状态,支持链式调用和并行处理。async/await是基于Promise的语法糖,使异步代码更同步化,提高可读性。两者都是处理回调地狱的有效工具,开发者应根据需求选择合适的方式。
21 3
|
14天前
|
前端开发
Promise 和 Async/await 在实际开发中的应用场景
Promise 和 Async/await 在实际开发中的应用场景
|
30天前
|
前端开发
Promise和async/await之间有什么区别
Promise与async/await是异步编程的两种模式。Promise使用.then()和.catch()处理回调,语法较复杂,易出现回调地狱;而async/await提供更清晰的顺序代码,使用try/catch进行错误处理,使异步操作更易读、易维护。Promise在控制流和错误堆栈方面较为灵活,但定位错误难,而async/await自动等待、线性控制流,错误堆栈清晰。两者各有优势,选择取决于具体需求和偏好。
|
30天前
|
前端开发 JavaScript
在JavaScript中,回调函数、Promise和async/await这三种异步处理机制的优缺点
JavaScript的异步处理包括回调函数、Promise和async/await。回调函数简单易懂,但可能导致回调地狱和错误处理困难。Promise通过链式调用改善了这一情况,但仍有回调函数需求和学习成本。async/await提供同步风格代码,增强可读性和错误处理,但需ES8支持,不适用于并发执行。根据项目需求选择合适机制。
|
30天前
|
前端开发 JavaScript Java
Promise, async, await实现异步编程,代码详解
Promise, async, await实现异步编程,代码详解
25 1
|
30天前
|
前端开发
promise和async的区别是什么?
promise和async的区别是什么?
15 1
|
30天前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
18 1