Vue 3 Vue-router 4 Composition API - 在组件外部调用 router.push 不起作用

Question

在我的 Vue 3 项目中，我使用 Vue 的组合 API，并且将 axios 定义为

plugins/axios.js

中的插件，如下所示：

import axios from "axios";
import { useRouter } from "vue-router";
import { useErrorStore } from "../stores/error";

axios.interceptors.response.use(
    (response) => {
      return response;
    },
    (error) => {
      const errorStore = useErrorStore();
      errorStore.state.errors.push(error.response.data.detail);
      if (parseInt(error.response.status) == 422) {
        const router = useRouter();
        router.push({
          name: "login",
        });
      }
      return Promise.reject(error);
    }
  );
export default axios;

预期行为： 当 API 调用返回 422 状态时，意味着访问令牌无效/过期，用户将被重定向到登录页面。

问题：

router.push

不起作用，发生错误时我没有被重定向。我也没有在控制台上收到任何错误消息。

另一方面，在错误情况下定义和访问的

errorStore

工作得很好。

问题： 如何从自定义 axios 插件文件中将用户重定向到另一条路线？ 或者，是否有更好/更常见的方法来实现这一目标？

感谢您的帮助！

Answer 1

我要回答这个问题，因为它不断出现在 Google 搜索中，并且 @Estus Flask 的评论是正确的。

您不应在

script setup

标签之外使用可组合项。但在这种情况下，不需要可组合项，因为可以直接导入路由器并仍然按预期使用。所以而不是...

import { useRouter } from 'vue-router';
const router = useRouter();

直接导入您为应用程序启动设置的路由器对象。所以，在

@/router/index.js

中，假设你有这样的东西：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        // your routes here
    ]
});

export default router;

然后，在你的 Axios 插件中，你会看到这样的内容：

import axios from 'axios';
import router from '@/router';

axios.interceptors.response.use(
    (response) => {
        return response;
    },
    (error) => {
        // whatever else you want to do with the error
        router.push({ name: 'login' });
    }
);

根据我的理解，路由器是一个单例，您将使用构造的/实时实例。