首页 > 其他分享 >vue-router.esm.js:2065 Uncaught (in promise) Error: Redirected when going from "/login?redirect

vue-router.esm.js:2065 Uncaught (in promise) Error: Redirected when going from "/login?redirect

时间:2023-10-05 11:11:08浏览次数:29  
标签:redirect resolve 2Fhome vue call location VueRouter reject push

原因:
  vue-router路由版本更新产生的问题,导致路由跳转失败抛出该错误;
真正的原因是由于返回了一个Promise对象, 正常的跳转由then方法执行 当正常的路由跳转, 被"路由导航守卫"拦截并重新指定路由时, 由于 this.$router.push() 返回的是Promise对象, 此时then方法不能正常执行, 无法跳转到指定路由, 就触发了该对象的捕获错误的方法, throw抛出错误, 但并不影响程序功能.

解决方式:
通过重写VueRouter原型对象上的push方法, 覆盖原来抛出异常的方法, "吞掉"异常
切记: 一定要在router创建实例之前

// console.log(VueRouter);
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;

// call与apply:相同点:都可以修改this,
            // 不同点:传递的参数,call传递多个参数时,以,作为分隔
                           //    apply传递多个参数时,以数组方式进行


// 重写push/replace
// 第一个参数:告诉原来push方法,你往哪里跳转(传递哪些参数)
// 第二个参数:成功的回调
// 第二个参数:失败的回调
VueRouter.prototype.push = function(location,resolve,reject) {
    if(resolve && reject) {
        originPush.call(this,location,resolve,reject);
    }else {
        originPush.call(this,location,()=>{},()=>{});
    }
}


VueRouter.prototype.replace = function(location,resolve,reject) {
    if(resolve && reject) {
        originReplace.call(this,location,resolve,reject);
    }else {
        originReplace.call(this,location,()=>{},()=>{});
    }
}

标签:redirect,resolve,2Fhome,vue,call,location,VueRouter,reject,push
From: https://www.cnblogs.com/StevenYF/p/17743168.html

相关文章

  • vue:登录后跳转到之前要访问的页面([email protected])
    一,安装pinialiuhongdi@lhdpc:/data/vue/responsive$npm-Sinstallpinia安装完成后查看已安装的版本:liuhongdi@lhdpc:/data/vue/[email protected]/data/vue/responsive└──[email protected]二,代码:1,store/redirect.js123456......
  • vue:路由错误/404 not found([email protected])
     一,官方文档地址: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html二,代码:1,router配置{path:'/:pathMatch(.*)*',name:'NotFound',meta:{title:"路由未匹配",top:"3"},component:NotFound},2,notfound.vue......
  • vue中beforedistory应用
    遇到一个问题,就是我在使用全局事件总线的时候发布了一个事件,然后在a组件里面这个时间会被触发一次,在b组件里面也会触发一次.这两个组件是平级组件不是嵌套组件.然后呢,在a组件触发完之后,我去了b组件,在b组件中触发相同时间的时候,a组件的逻辑和b组件的逻辑都执行了一次.一开......
  • 搭建Springboot+Vue+Element的简单系统流程
    今天研究了一下如何把Springboot+Mybatis和Vue+Element结合起来使用详细写一篇博客来记录一下流程吧,因为途中发现了很多的问题首先,创建Springboot项目,惯例添加依赖<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="htt......
  • Vue扩展组件系列
    ---注意日期范围都是要日期/时间两种格式(date/datetime,默认值:date)1、日期范围快选【当前日期-7天,当前日期】近期三天、一个周、一个月、三个月、一年v-model= {FieldName:'CTime',FieldValue:[]} 2、快速筛选2截至日期【选择字段】+日期框v-model= {FieldNam......
  • vue3 使用 i18n
    安装官网:https://vue-i18n.intlify.dev/api/general.htmlpnpmaddvue-i18n@9使用//@/locale/index.tsimportappConfigfrom"@/configure/app.config.ts";import{nextTick}from'vue'importtype{Ref}from'vue'import{createI18n}......
  • 在 WebStorm 里调试 vue3 项目
    官方说明:https://blog.jetbrains.com/webstorm/2018/01/working-with-vue-js-in-webstorm/#:~:text=Wecandebugourapplication,andstartthedebugsession.打开WebStorm编辑器右上角的Configuration的Edit,在URL填入项目的地址并选择想要使用的Brower,点击调试之......
  • vue3 使用 pinia
    安装pinia官网:https://pinia.vuejs.org/pnpmaddpinia使用新建pinia实例//@/store/index.tsimport{createPinia}from"pinia";importuseUserStorefrom"@/store/user.ts";exportuseUserStore;constpinia=createPinia();exportdefault......
  • vue3 使用 vue-router
    安装vue-routerpnpmivue-router使用vue-router创建自己的router//@/route/index.tsimport{createRouter,createWebHashHistory}from'vue-router'importtype{RouteRecordRaw}from"vue-router"constroutes:RouteRecordRaw[]=[{......
  • 1小时学会Vue之VueRouter&Vuex 学习笔记
    https://www.bilibili.com/video/BV1zF411R7cR/开发工具推荐vue-devtool  地址 https://devtools.vuejs.org/guide/installation.html一 router动态路由嵌套路由编程式导航导航守卫 二vuex ......