Vue进行跳转时出现：Cannot read property ‘$router‘ of undefined（已解决）

最新推荐文章于 2024-03-06 14:08:59 发布
最新推荐文章于 2024-03-06 14:08:59 发布
阅读量2.9w 收藏 14
点赞数 13
分类专栏： 前端 文章标签： vue java javascript js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanchangliang/article/details/109495925
版权

最近一直在深入学习Vue，没怎么看视频就自己摸索起来，所以就遇见了许多的问题，包括：axios如何进行请求；以及如何在axios请求后，对返回的data对象进行解析；以及如何进行自动跳转等等，都是一些简单的问题，但是都能困扰我许久，现在又遇到了这个问题，最终解决了就好。

先看我原先的代码：

在这里插入图片描述


出现问题：

在这里插入图片描述


解决办法：

在这里插入图片描述
如上更改代码后就可以成功跳转了，哈哈



备注

在这里插入图片描述
这里的 ‘index’ 是路由，需要在src/router/index.js中添加这个路由，(我的是vue3.0版本)看我的代码：
在这里插入图片描述
如果是vue2.0版本，需要在src/router/index.js中添加路由：

在这里插入图片描述


原因

这是由于this的指向有问题，我们只需要重新声明一下this就可以重新调用了

最终还是解决了，可以成功跳转了

三七有脾气
关注
  • 13
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
vue在请求拦截中,this.$router.push跳转报Cannot read property ‘$router‘ of undefined
TLJava^v^的博客
10-29 1808
vue在请求拦截中,this.$router.push跳转报Cannot read property ‘$router‘ of undefined
Cannot read property ‘_router‘ of undefined Vue js 或者Cannot read property ‘push‘ of undefined Vue
啊谋的博客
12-15 872
记录一下： 问题所在： You need to set up routers inmain.jscomponent, not inHomeContent.vue. Not that inmain.js, you need to passrouter:new Vue({ router, render: h => h(App) }).$mount('#app') 具体实现： You need to passrouterdata to Vue component imp...
vue 在axios中使用路由跳转并传参，报Cannot read property '$router' of undefined
七侠剑客的博客
05-21 1万+
在用vue开发项目时，需要经A页面的参数以及页面中axios返回的参数传递到B页面，直接上代码吧(简单写了)： data() { return { imageUrl: require("../../static/tianjia.png"), dateValue1: "2018-09-08", dateValue2: "2018-09-10", } } met...
router-link标签Cannot read property '$route' of undefined"报错解决方法
舜岳的博客
03-26 8147
报错代码： <div class="card mb-3 px-3" v-for="item in data" v-bind:key="item.id"> <router-link :to="{ path:'/exams/details', query:{ name: this.$route.query.name, id: this.$route.params.id} }" c...
TypeError: Cannot read property '$router' of undefined at eval
咖喱辣椒
10-03 1万+
一直出现router使用不能识别，在axios中使用js路由我用的是function axios.get(’/user’, { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 然后打印出th...
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。然后像下面这样写，就可以实现了。
Vue打包Cannot read property 'tapPromise' of undefined报错处理.docx
01-21
Vue打包Cannot read property 'tapPromise' of undefined报错处理 Vue.js是一款流行的前端框架，用于构建用户界面和单页应用程序。然而，在使用Vue.js时，我们可能会遇到一些报错信息，例如Cannot read property '...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
当你遇到“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”这样的错误，通常是因为在同一个模块中混用了CommonJS（`require`和`module.exports`）和ES6模块（`import`...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#&lt;Object&gt;‘的解决
08-30
在Vue开发过程中，有时会遇到一个常见的错误：`Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'`。这个错误通常发生在使用Webpack打包Vue应用时，由于模块导入导出规范的...
Sawyer-zh#study-note#Vue-js路由报错TypeError-Cannot-read-property-c-
07-25
title: 'Vue.js路由报错:TypeError: Cannot read property ''_c'' of undefined'错误详情：像上面这
解决vue.js this.$router.push无效的问题
10-18
Vue Router提供了一个编程式的导航方法——this.$router.push，用于在应用内进行页面跳转。然而，在实际开发过程中，我们可能会遇到this.$router.push无效的问题，导致路由跳转无法正确执行。本文将详细介绍在什么...
vue中this.$router.push跳转提示 Cannot read properties of undefined (reading ‘push')
qq_37485170的博客
06-15 915
背景 项目封装axios的全局拦截的时候遇到一个很奇怪的问题：axios.interceptors.request中遇到接口status不是200的情况，想跳到首页，方法如下: this.$router.push('/Login') 可是，并没有达到预期的效果，总会提示Cannot read properties of undefined (reading 'push') 探索中。。。...
Cannot read properties of undefined (reading ‘$router‘)
weixin_54048131的博客
02-17 1516
之后再改成这样的写法：就可以跳转了 router.push('/login')这里自己使用了，this.@router.push进行跳转的。在当前页面使用import 引入router。
vue-router.esm.js?8c4f:1905 TypeError: Cannot read property ‘$route‘ of undefined
听见涛声
05-14 1357
**场景：页面刷新出现空白，控制台报错： vue-router.esm.js?8c4f:1905 TypeError: Cannot read property ‘$route’ of undefined ** 首先打开百度搜了一圈，很多说是语法错误，路由嵌套里面，子路由的component多了一个s。但我这里的问题都不是，一开始以为是token刷新后消失了没有保存，后来定位到了是导航守卫的问题。 代码中用到了路由导航守卫： 翻看官方文档： 官方文档中对于beforeEnter的介绍，并没有看到我想
VUE3 Cannot read property ‘$router‘ of undefined
qq_18149105的博客
08-04 1469
VUE3 Cannot read property '$router' of undefined
Uncaught (in promise) TypeError: Cannot read property '$router' of undefined
热门推荐
qq_34940644的博客
04-23 2万+
1.使用vue进行路由跳转时出现错误：Uncaught (in promise) TypeError: Cannot read property ‘$router’ of undefined。 代码如下： 解决办法： 错误原因（个人理解）： 可能是this关键字的作用域问题引起的错误。。。 ...
TypeError: Cannot read property ‘$router‘ of undefined at eval
zk86547462的博客
09-22 3980
一直出现router使用不能识别，在axios中使用js路由我用的是function axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 然后打印出this,出现undefined,没有this对象
Vue路由报错：TypeError: Cannot read properties of undefined (reading ‘_self‘)undefined (reading ‘$route‘)
weixin_43913958的博客
06-16 2166
TypeError: Cannot read properties of undefined (reading '_self')undefined (reading '$route')
在uniapp中vue3报错Cannot read property ‘__route__‘ of undefined
最新发布
weixin_56709740的博客
03-06 1358
因为vue3没有this上下文，所以使用uni.createSelectorQuery().in(this)时会出这个错误。
vue3里TypeError: Cannot read property '$route' of undefined错
11-21
在Vue3中，当你在组件中使用`$route`时，可能会出现`TypeError: Cannot read property '$route' of undefined`的错误。这是因为在Vue3中，`$route`和`$router`已经从组件实例中移除，需要使用`useRoute`和`useRouter`函数来代替。 以下是解决该错误的方法： 1. 导入`useRoute`函数和`useRouter`函数： ```javascript import { useRoute, useRouter } from 'vue-router' ``` 2. 在组件中使用`useRoute`和`useRouter`函数： ```javascript export default { setup() { const route = useRoute() const router = useRouter() // 使用route和router对象 // ... } } ``` 注意：在Vue3中，组件的选项中不再支持`$route`和`$router`属性，因此不能在`created`或`mounted`等生命周期钩子中使用它们。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三七有脾气

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值