vue在请求拦截中,this.$router.push跳转报Cannot read property ‘$router‘ of undefined

最新推荐文章于 2024-03-06 14:08:59 发布
最新推荐文章于 2024-03-06 14:08:59 发布
阅读量4k 收藏 6
点赞数 5
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50278775/article/details/123717170
版权

场景是这样的，当用户进来时，在请求拦截中判断token/ticket（这里我们项目用的是ticket）是否过期，过期的话就跳转到登录页面。

请求拦截是这样的，红框就是我用来跳转到登录页面的

然后就报Cannot read property '$router' of undefined

网上我查到的都是说是this指向问题，但是我看我代码的方法都是用es6的箭头函数，应该不存在this指向问题，不过实在想不出为什么，我就死马当活马医，var that = this; but 还是报错Cannot read property '$router' of undefined，我打印了this和that,但结果都是undefined。

最后在这个js文件中引入router

把this.$router.push改为router.push 就能正常跳转了（vue中的this.$router 和 this.$store都是在vue组件中使用才有效，也就是.vue文件，js文件的话，需要引入才能使用，this.$store也是需要引入才能用哦）

浅记一下，下次不许犯了

-阿大头
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
解决vue.js this.$router.push无效的问题
12-09
如下所示： login() { if(this.email.length > 0 && this.password.length >0) { this.$http.post('/api/login', { user: this.email, password: this.password }) .then(res => { let userPwd = res.data if(this.password == userPwd) { this.$router.push("/") } else { alert("错误
vue——router更改路由地址，但是页面不能跳转
yehaocheng520的博客
07-28 7324
在做电商项目时，筛选标签时，需要路由发生变化，但是当前的页面商品列表还需要局部刷新。 如果更改路由后，页面跳转，则是全局刷新，局部刷新才能够满足用户需求。 则此时要做的就是：更改路由地址，但是页面不能跳转。 this.$router.push或者this.$router.replace就是实现路由改变页面跳转的方法： this.$router.push({ path:'index.html', query:{ id:3, tag:18 } }) 如果仅仅是为了让路由发生变化的话，可以将上面中
在uniapp中vue3报错Cannot read property ‘__route__‘ of undefined
最新发布
weixin_56709740的博客
03-06 876
因为vue3没有this上下文，所以使用uni.createSelectorQuery().in(this)时会出这个错误。
this.$router.push 提示错误 Cannot read property ‘push‘of undefined
zilvzsy的博客
06-30 3797
记笔记，免忘记！方便自己后续查阅！ 问题如下图： 因为我这里是等待两个请求请求完成后再执行跳转方法，所以代码如下： setTimeout(function(){ localStorage.removeItem('taskQuery'); this.$router.push({path:'/configure'}) },1000) 但是运行之后，报错..
vue报错之this.$router is undefine
liuarmyliu的博客
04-29 9833
vue报错之this.$router is undefine 最近写项目遇到这个报错，特此记录一下 axios.get('/person/ticket') .then(response => { this.$router.push('/ground') }) 原因很简单，因为我使用的是箭头函数，改变了this指向，所以vue在这里找不到$ro...
vue中this.$router.push 路由跳转提示错误 Cannot read properties of undefined (reading ‘push‘)
热门推荐
qq_37485170的博客
02-01 1万+
后来打印发现可能这个封装的方法里面最初this本身就有问题，打印出来是undefined,那怎么整都找不到$router啊，于是最后在这个js文件中引入了router。项目封装axios的全局拦截的时候遇到一个很奇怪的问题，axios.interceptors.request中遇到接口不是200的情况，想跳到首页，方法如下。当然，要是实在是想不到解决办法，我还有个投机取巧的方法，直接用windows本身自带的路径跳转也可以实现了。附上完整的registerAjax.js。然后像下面这样写，就可以实现了。
使用$router.push()方法进行传值时显示undefined
m0_73956769的博客
12-07 599
使用$router.push()方法进行传值时显示undefined
vue.js this.$router.push获取不到params参数问题
10-15
主要介绍了vue.js this.$router.push获取不到params参数问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中this.$router.push参数获取方法
11-26
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数：   通过name...
Vue的Router在使用this.$router.push(url)出现错误
《@书山有径%》的博客
07-12 696
Vue的Router在使用this.$router.push(url)出现错误 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/home/news”. 错误如下 解决办法 在Vue项目的index.js项目中加入一下内容。 const originalPush = Router.prototype.push Router.prototype.push = fu
vue-router跳转页面时Cannot read property 'push' of undefined的问题
qazxsw635241的博客
11-26 5064
1、在外部定义一个值指代Vue实例 var self = this; this.$http.get("login", { params: data }) .then(function(response) { self.$router.push('index'); }) .catch(function(response) { console.error(response)...
vue路由this.$router.push跳转传参时，页面刷新会出现undefined的问题
qq_40685439的博客
03-26 6013
一般来说。利用this.$router.push进行页面跳转时，如果传递的参数为对象（图片中data为对象）时，不能直接传，而是需要把对象经过JSON.stringify转为字符串，取数据的时候需要用JSON.parse解析出来，刷新的时候才不会出现undefined。 注意： 1、经过测试，此方法只对以query形式传参时才会起效果，params不行。 2、params传参，push里面只能是 name:‘xxxx’,不能是path:’/xxx’, 否则拿到的数据是undefined。因为params只.
this和this.$router这个方法在setup()里使用竟然是undefined----使用composition-api踩到的坑总结篇
qq_33653393的博客
05-25 1608
vue的版本是2，使用插件composition-api尝试组合式api 1. this和this.$router这个方法在setup()里直接使用竟然是undefined 我是这么写的 setup() { console.log(this)//undefined console.log(this.$router)//error } 控制台告诉我显然有问题，但是我在另一个完成的vue页面里在setup()的方法里使用了this.$router，发现可以正常使用 setup() {
vue中this.$router.push跳转提示 Cannot read properties of undefined (reading ‘push')
qq_37485170的博客
06-15 837
背景 项目封装axios的全局拦截的时候遇到一个很奇怪的问题：axios.interceptors.request中遇到接口status不是200的情况，想跳到首页，方法如下: this.$router.push('/Login') 可是，并没有达到预期的效果，总会提示Cannot read properties of undefined (reading 'push') 探索中。。。...
VUE this.$router.push(‘/article‘) 报错问题
m0_49811662的博客
07-16 605
[Vue warn]: Error in v-on handler (Promise/async): "NavigationDuplicated: Navigating to current loca 问题：[Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current location (”/article") is not allowed" 红框为如今所处.
使用this.$router.push('')的方法进行路由跳转，提示'$router' of undefined问题
weixin_34357962的博客
11-21 1205
转载于:https://www.cnblogs.com/guoshuli/p/9995660.html
vue实例用this.$router.push报错push of undefined
01-12
根据提供的引用内容，当使用`this.$router.push`方法时，可能会出现`push of undefined`错误。这个错误通常是因为`this.$router`未定义导致的。要解决这个问题，你需要确保在使用`this.$router.push`之前，已经正确地引入和配置了Vue Router。 以下是一个示例，演示了如何正确使用`this.$router.push`方法： ```javascript // 引入Vue和Vue Router import Vue from 'vue' import VueRouter from 'vue-router' // 使用Vue Router插件 Vue.use(VueRouter) // 创建路由实例 const router = new VueRouter({ routes: [ // 路由配置 ] }) // 创建Vue实例 new Vue({ router, // 将路由实例注入到Vue实例中 // 其他配置项 }).$mount('#app') // 在组件中使用this.$router.push this.$router.push({ path: '/xxx', query: { id: id } }) ``` 请确保在使用`this.$router.push`之前，已经正确地引入和配置了Vue Router，并且将路由实例注入到Vue实例中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值