vue3拦截器获取不到路由实例

 事情是这样的,我想做一个响应拦截器,如果状态码不正常的时候,清除token并返回到登录页面,如下:

但是控制台报错说:"Uncaught TypeError: Cannot read properties of undefined (reading 'push') at",意思是,router里面不存在push这个方法

说明了这个router有问题,然后我就打印了一下router,发现获取不到,是undefined,后来查了各种资料,发现如下问题:

import { useRouter } from 'vue-router';

↑ 这个方式是用于在Vue组件内部获取路由的实例的方式,但我这不是组件内部,而是封装的一个ts/js文件

然后我就用了下面这个引入方式

import router from '@/router/index';

当你需要直接在JavaScript/TypeScript文件(如入口文件main.js或插件、中间件等)中配置或使用路由实例时。通过直接引入router实例,你可以全局地访问和配置路由,比如添加路由守卫、修改路由配置等。

这样就可以获取到路由信息了,然后就可以进行跳转

问题解决

Vue中,在响应拦截器中跳转路由可以通过使用Vue Router实现。要在响应拦截器中跳转路由,首先需要在项目中引入Vue Router,并在main.js或者需要使用路由的文件中进行配置。 首先,需要在项目中安装Vue Router,可以使用npm或者yarn进行安装。然后,在main.js文件中引入Vue Router并配置: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) const router = new VueRouter({ routes: [ // 定义路由信息 { path: '/home', component: Home }, { path: '/about', component: About }, // ... ] }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 然后,在需要使用响应拦截器的地方进行配置: ```javascript import axios from 'axios' import router from './router' axios.interceptors.response.use(response => { // 在响应拦截器中对返回的响应进行逻辑处理 if (response.status === 200) { // 根据逻辑判断,如果需要跳转路由,可以使用router.push方法实现跳转 router.push('/home') // 这里是示例,跳转到名为home的路由 } return response }, error => { return Promise.reject(error) }) ``` 在上述代码中,我们使用router.push方法在响应拦截器中跳转到指定的路由。通过在Vue Router中定义路由规则,我们指定了需要跳转的目标路由。当满足某个条件时,我们调用router.push方法进行路由跳转。 需要注意的是,我们需要确保在使用router实例之前Vue Router已经完成了初始化和配置。在main.js文件中,我们在创建Vue实例之前初始化并传入了router实例。 这样,在响应拦截器中调用router.push方法就可以实现路由的跳转了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值