vue3 怎么在响应拦截器中使用useRouter
时间: 2024-03-01 12:56:31 浏览: 187
在响应拦截器中,我们可以通过 `inject` 函数注入 `router` 对象,然后在拦截器中使用。
具体实现如下:
1. 在 `main.js` 中,使用 `provide` 函数将 `router` 对象注入到全局:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.provide('router', router)
app.use(router)
app.mount('#app')
```
2. 在拦截器中,通过 `inject` 函数获取到 `router` 对象,然后使用 `router.push` 方法进行路由跳转:
```javascript
import { inject } from 'vue'
import router from '../router'
axios.interceptors.response.use(
response => {
// do something
return response
},
error => {
if (error.response.status === 401) {
const router = inject('router')
router.push('/login')
}
return Promise.reject(error)
}
)
```
这样,就可以在响应拦截器中使用 `router` 对象了。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)