首页 > 其他分享 >解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题

解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题

时间:2023-08-02 14:57:12浏览次数:45  
标签:Vue err redundant item 跳转 push router navigation 路由

解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题

问题

问题描述:重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能视而不见。

解决方案

方案一:只需在 router 文件夹下,添加如下代码。

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
'''
添加以下代码即可
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err)
}
''''
export default router

方案二:在跳转时,判断是否跳转路由和当前路由是否一致,避免重复跳转产生问题。

toMenu (item) {
  if (this.$route.path !== item.url) {
    this.$router.push({ path: item.url })
  }
}

方案三:使用 catch 方法捕获 router.push 异常。

this.$router.push(route).catch(err => {
  console.log('输出报错',err)
})

标签:Vue,err,redundant,item,跳转,push,router,navigation,路由
From: https://www.cnblogs.com/chunyouqudongwuyuan/p/17600641.html

相关文章

  • vue打开新窗口的两种方式
    1.使用路由跳转,绑定target="_blank"<router-linktarget="_blank":to="{path:'/pdf/download',params:{id:'8'}}"><el-buttontype="primary">ClicktodownloadPDF......
  • vue 获取当月第一天日期和最后一天日期
    //获取当月第一天数据getCurrentMonthFirst(){letdate=newDate()date.setDate(1)letmonth=parseInt(date.getMonth()+1)letday=date.getDate()if(month<10)month='0'+monthif(day<10)da......
  • vite+vue3+ts+elementPlus前端框架搭建 [一]
    记录下搭建vite+vue3+ts+elementPlus项目的过程及遇到的问题。建议使用pnpm安装依赖,npm切换到pnpm链接地址:[https://www.pnpm.cn/installation]() 1.运行环境node-vv18.17.0npm-v9.8.12.使用pnpm创建vite项目及安装依赖npminitvite-apppnpmcreate......
  • 【.NET6 + Vue3 + CentOS7.9 + Docker + Docker-Compose + SSL】个人博客前后端运维部
    个人博客前端:https://lujiesheng.cn个人博客后端:https://api.lujiesheng.cn个人博客运维:https://portainer.lujiesheng.cn1.服务器准备我采用的是腾讯云轻量应用服务器(2C4G8M80G),配置如下图:安装镜像选择CentOS7.664bit:2.服务器防火墙设置添加防火墙出入站规则......
  • vue 防连点
    directives:{preventReClick:{inserted:function(el,binding){el.addEventListener('click',(e)=>{if(!el.disabled){el.style.pointerEvents='none'setTimeout(()=>{......
  • vite 项目webstorm跳转失效 VSCode、vue 无法对 @ 路径 跳转 ,几乎适用于所有webpack、
    在根目录加一个jsconfig.json文件{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]},"target":"ES6","allowSyntheticDefaultImports&q......
  • vue 通过css 给html元素增加前缀红色星号
    <el-form-item>前面增加红色星号要为<el-form-item>的label增加红色星号,你可以使用CSS中的伪元素::after或::before来实现。下面是如何在样式中添加红色星号的示例:<el-form-itemclass="red-label"label="物流商信息"></el-form-item><stylescopedlang="scss"......
  • 通过Vue + intro.js 实现页面新手引导流程功能
    最近需要增加一个新手页面引导流程的功能,在网上搜罗之后发现了intro.js这个插件1.安装依赖npminstallintro.js--save2.在main.js中引用插件//首页引导插件importintrofrom'intro.js'//introjs库import'intro.js/introjs.css'//introjs默认css样式//introjs还......
  • vue--day50--todolist案例自定义事件修改footer 和header 修改
    1.MyHeader.vue<template><divclass="todo-header"><!--v-model:="title"是实时绑定的--><inputtype="text"placeholder="请输入你的任务名称,回车键确认"v-model="title"@keyup.enter="add"/>......
  • vuex模块化
    importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);importhomefrom"./home"importsearchfrom"./search"conststore=newVuex.Store({modules:{home,search}});exportdefaultstore......