木灵鱼儿

木灵鱼儿

阅读:176

最后更新:2021/07/29/ 15:59:09

关于使用this.$router对象进行跳转时产生重定向错误的解决方法

vue-router升级版本后,使用$router进行跳转时,将返回一个promise对象,这其实是好事,但是除了这个,官方对报错也做了调整。

这里先看一下常见一个重定向错误:

为什么产生这个错误,我在谷歌查了下,有这么一个解释:

这是设计使然。为什么?

阅读此评论

TL;DR:假设您在页面 A,然后单击一个按钮将您带到页面 B(有点像method: goToB() { router.push('/B'); }页面 A)。但是页面 B有一个导航守卫,将您发送到页面 C。

此错误是让该goToB()功能知道路由器无法完成所需任务并且用户尚未登陆的一种方式/B

这很讨厌,但信息量很大

这里最大的困惑是重定向(登陆页面 C)是系统架构师的“预期”结果。但是,与此同时,对于router.push. 这就是为什么当它弹出为 时Error,会让感到困惑和沮丧。

内容出处:《vue-router — Uncaught (in promise) Error: Redirected from “/login” to “/” via a navigation guard》

也就是说,这个重定向错误是正常的报错,并且不会影响使用,但是就是会提示,因为他改变了你路由跳转时的语义,所以要报错。

那没办法,我们只能忽略这个错误了。

错误处理

由于返回的是一个promise对象,我们使用catch并且传个空函数就行了。但是,这样的话,其他的错误也无法正常提示了,所以,安全起见,我们还需要对错误进行区分。

先看下vue router的导航故障有哪些:《导航故障》

文档上说是有4种,并且提供了判断方法,我们的重定向错误属于redirected类。

我们对它进行排除就行了。

下面是我自己封装了两个方法:

import vueRouter from "vue-router";
const { isNavigationFailure, NavigationFailureType } = vueRouter;

export default {
  methods: {
    //自定义路由跳转
    myRouterPush(path) {
      return new Promise((resolve, reject) => {
        this.$router.replace(path).catch(error => {
          if (!this.isRouterError(error, "redirected")) {
            return reject(error);
          }
        })
        return resolve(true);
      })
    },
    /**
     * 是否为指定路由错误
     * errorName:
     *  redirected:被重定向 
     *  aborted:中断了本次导航、
     *  cancelled:未完成跳转又跳转了
     *  duplicated:导航被阻止,因为我们已经在目标位置了
     */
    isRouterError(error, errorName) {
      return isNavigationFailure(error, NavigationFailureType[errorName]);
    }
  }
}

使用时:

//跳转
this.myRouterPush({ name: "Admin" });

如果想处理其他错误,我这里也是返回的promise,所以catch捕获即可。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 176

相关文章

目录树