vue3 怎么在请求拦截器中引入router

在 Vue3 中，在请求拦截器中引入 router，可以使用 `getCurrentInstance` 方法获取当前组件实例，从而获取 router 对象。具体实现方式如下：

import { getCurrentInstance } from 'vue'
import router from '../router'

axios.interceptors.request.use(config => {
  const instance = getCurrentInstance()
  if (instance) {
    instance.$router = router
  }
  // ...
  return config
}, error => {
  // ...
  return Promise.reject(error)
})

这里使用了 `getCurrentInstance` 方法获取当前组件实例，然后将 router 对象赋值给 `$router` 属性，这样就可以在请求拦截器中使用 `$router` 对象了。

相关问题

axios请求拦截器和vue-router的前置路由守卫有什么异同

两者都是在请求或者路由跳转之前进行拦截和处理，但是区别在于：axios请求拦截器是针对网络请求的拦截与处理，而vue-router的前置路由守卫是针对路由跳转的拦截与处理。axios请求拦截器可以用来在发送请求前做一些统一的处理，比如添加token等；vue-router的前置路由守卫可以用来进行用户权限认证等操作。

vue 请求拦截器跳转路由方式

在 Vue 中，可以通过使用 axios 拦截器来实现请求拦截器。在请求拦截器中，可以对请求进行一些处理，例如添加请求头、修改请求参数等。同时，也可以在请求拦截器中进行路由跳转。

要实现在请求拦截器中进行路由跳转，可以在拦截器中使用 Vue Router 的 $router 对象，通过调用 $router.push 或 $router.replace 方法来实现路由的跳转。

下面是一个示例代码：

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

axios.interceptors.request.use(config => {
  // 在请求头中添加 token
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }

  // 判断是否需要进行路由跳转
  if (需要跳转路由) {
    router.push('/login')
  }

  return config
})

在上面的代码中，我们使用 axios 的拦截器，在请求头中添加了 token，并且通过判断是否需要进行路由跳转来调用了 router.push 方法进行路由跳转。