[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

最后问题就解决了