Question

在我的axios.config.js文件中，我有这段代码：

    axios.interceptors.response.use(
    config => config,
    error => {
      if (error && error.message === "Network Error") {
        if (router.currentRoute.name !== "login") {
          router.push({
            name: "errorPage",
            query: { template: "NoConnection" }
          });
        }
      } else if (error && error.response && error.response.status === 401) {
        Vue.auth.logout().then(() => {
          router.push({
            name: "login"
          });
        });
      } else if (
        error &&
        error.config.hasOwnProperty("errorHandle") &&
        error.config.errorHandle === false
      ) {
        return Promise.reject(error);
      } else {
        _notifyError(error);
      }
      return Promise.reject(error);
    }
  );

当我收到401状态代码时，将调用正确的代码，并且路由更改为：http://localhost:8080/#/error_page?template=UnAuthorized，但页面空白。如果刷新，我会看到错误页面。

我的路线：

 {
      path: "/error_page",
      name: "errorPage",
      component: ErrorPage
 },

有什么主意吗？

Answer 1

尝试将router.push对象更改为

router.push({
  path: "errorPage",
  query: { template: "NoConnection" }
});

在指定query的情况下，只能在router.push对象内使用path，否则，如果使用name，则必须使用params。

如果这还是行不通的，请尝试

router.push({
  name: "errorPage",
  params: { template: "NoConnection" }
});

{
  path: "/error_page/:templateName",
  name: "errorPage",
  component: ErrorPage
},

然后在ErrorPage内部使用templateName关键字获取$router参数。

Vue路由器：从axios拦截器路由后的空白页

1 个答案: