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

userouter 是 vue 3 composition api 中的钩子（hook），它只能在 vue 组件中使用，而不是在普通的 javascript 模块或工具函数中。

为了在拦截器中使用 router，你需要在 axios 响应拦截器中获取到 router 实例。你可以通过以下两种方式来解决这个问题：

方案 1：将 router 作为参数传递到拦截器中

一种常见的解决方案是在设置 axios 实例时，把 router 作为参数传递给需要使用它的地方。你可以通过 vue 的全局状态（比如 vuex 或 pinia）来存储 router 实例，然后在拦截器中使用它。

步骤：

1.在主应用中传递 router：

你可以在你的 vue 应用的主组件（比如 app.vue）中获取 router 实例并将其存储在 vuex 或 pinia 中。

2.在 axios 中使用 router：

你可以在响应拦截器中访问存储的 router 实例，进而进行路由跳转。

示例实现：

在 store.js 或 pinia 中存储 router 实例：

store.js (假设你使用 pinia 或 vuex 来管理全局状态)

在pinia定义一个变量用来存储router

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

在 app.vue 中将 router 存入 store：

在app.vue中给pinia定义的变量赋值

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

const appstore = getappstore()
appstore.router = router

修改 axios 配置文件，使用存储的 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

方案 2：通过 window 或 global 暴露 router

如果你不想使用全局状态管理，也可以通过全局对象（如 window）来暂时存储 router 实例。这样做虽然不太推荐，但也能实现需求。

示例实现：

1.在 app.vue 中将 router 暴露到 window 上：

// 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');

2.在 axios 配置中直接使用 window.approuter：

// 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;