[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,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、前言

跳转网页的两种方式:
  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

最后问题就解决了
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/48870.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!