关于使用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捕获即可。