浅析Vue3中useRouter怎么在Vue组件外使用

// 用来存储 router 实例
  let router  =ref(null)

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

const appStore = getAppStore()
appStore.router = router

import axios from 'axios'
import { getAppStore } from '../store'
import { showDialog } from 'vant'
import { useRouter } from 'vue-router';
const router = useRouter()

const sender = axios.create({
  baseURL: import.meta.env.PROD ? import.meta.env.VITE_API_TARGET : 'api',
  headers: {
    'Content-Type': 'application/json'
  }
});

const appStore = getAppStore()
// const router = useRouter()
// 添加请求拦截器
// https://axios-http.com/zh/docs/interceptors
sender.interceptors.request.use(function (config) {
  // console.log('请求拦截器')
  // 统一添加 token 请求头
  config.headers['Authorization'] = appStore.token
  return config;
}, function (error) {
  // console.log('请求拦截器 error: ', error)
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
sender.interceptors.response.use(function (response) {
  // console.log('响应拦截器', response)
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  appStore.loading = false
  if (response.headers.token) {
    appStore.token = response.headers.token
    // console.log('update token '+response.headers.token)
  }

  return response.data
}, function (error) {
  // console.log('响应拦截器 error: ', error)
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  appStore.loading = false
  if (error.status === 401) {
    appStore.isLogin = false
    appStore.token = ''
    const router = appStore.router;
    router.push('/login')
  }

  if (error.status === 422) {
    showDialog({
      teleport: '#main',
      className: 'global-dialog',
      showConfirmButton: false,
      closeOnClickOverlay: true,
      message: error.response.data.message
    })
  }
  return Promise.reject(error)
});

export const send = sender

// App.vue
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter } from 'vue-router';
import { routes } from './router';

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 暴露 router 实例到 window 对象
window.appRouter = router;

const app = createApp(App);
app.use(router).mount('#app');

// axios.js
import axios from 'axios';
import { showDialog } from 'vant';

const sender = axios.create({
  baseURL: import.meta.env.PROD ? import.meta.env.VITE_API_TARGET : 'api',
  headers: {
    'Content-Type': 'application/json',
  },
});

// 添加请求拦截器
sender.interceptors.request.use(function (config) {
  // ...请求拦截逻辑
  return config;
}, function (error) {
  return Promise.reject(error);
});

// 添加响应拦截器
sender.interceptors.response.use(function (response) {
  // ...响应拦截逻辑
  return response.data;
}, function (error) {
  // 使用 window.appRouter 进行路由跳转
  if (error.status === 422) {
    const router = window.appRouter;
    if (router) {
      router.push('/login');
      showDialog({
        teleport: '#main',
        className: 'global-dialog',
        showConfirmButton: false,
        closeOnClickOverlay: true,
        message: error.response.data.message,
      });
    }
  }

  return Promise.reject(error);
});

export const send = sender;