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

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" }
});

当指定path 时，您只能在router.push 对象中使用query，否则如果您使用name，则必须使用params。

如果这也不起作用，请尝试

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

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

然后在您的ErrorPage 中获取带有$router 关键字的templateName 参数。