Vue中this.$router.push()失效解决办法

最新推荐文章于 2024-08-02 17:54:22 发布
最新推荐文章于 2024-08-02 17:54:22 发布
阅读量3.4k 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52444089/article/details/133962720
版权

可恶，今天使用导航栏，想加一个登录验证，结果登录界面一直不跳转，结果发现我是憨包！！！
一开始，使用当前路径下的App.vue作为初始app

里面就是一个路由view

重点：路由配置：让根目录为登录页面，其余的通过名字或路径进行路由

登录模板

跳转方法，就是路由写的有问题，之前路由编写时没加main区分，导致没进行跳转，一直在登录界面，嘶。

总结，就是路由要写好，要么你初始界面为空白，然后接按钮是跳转路由，要么就是初始界面是登录，成功后进行路由跳转。

浪子不顾及三毛
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
this.$router.push点了后hash地址改变了，页面却不跳转
weixin_54048131的博客
07-30 7638
this.$router.push点了后hash地址改变了，页面却不跳转
Vue this.$router.push() 获取不到params参数
微风的博客
04-14 989
Vue this.$router.push() 获取不到params参数
vue3使用router.push无法跳转/跳转缓慢
weixin_60831172的博客
05-09 977
把router.push跳转方式改为router.resolve方式跳转。
vue 使用this.$router.replace、this.$router.go、this.$router.push 等进行页面跳转不生效
絮落锦乡的博客
03-27 8527
一、问题描述 vue 在使用页面跳转的时候，发现页面总是不调转，或者地址变了，页面不刷新等问题 二、解决方案 1、排查页面是否使用了beforeRouteLeave ，如果使用了该函数，意味着路由被拦截下来进行处理了，这个时候做完逻辑处理后必须要加上 next() 函数，才能让路由继续跳转，否则页面将不会跳转。 2、排查页面是否报错，哪个方法未定义。 3、检查路由配置是否正常。 ...
vue2本地开发环境正常，生产环境下this.$router.push({ name: ‘login‘ })不跳转
JaneYork的博客
03-03 769
如果问题仍然存在，请检查浏览器的开发者工具（控制台、网络面板等），查看是否有任何错误消息。如果在Vue.js 2中在本地开发环境下正常运行，但在生产环境下使用​。在检查和解决以上可能的问题之后，你应该能够在生产环境中成功执行​。
vue中this.$router.push()通过Param传参错误
weixin_56861492的博客
08-20 2481
vue中this.$router.push()通过Param传参错误
Vue 3http.js中使用this.$router.push失效
码码哈哈的博客
03-25 4435
直接引入http.js的router就好了 import router from "@/router/index.ts" //使用 if (error.response) { console.log("status:" + error.response.status) switch (error.response.status) { case 401: //完善登录跳转
Vue3路由push跳转(解决Vue2this.$router.push失效）
热门推荐
韦_恩的博客
01-27 2万+
Vue3.x出来有一阵子了，今天用它的时候发现Vue2中的this.$router.push竟然不能用了！！！！！，真是服了，还得花点时间瞅瞅咋回事，所以.....还是总结下吧 目录 1.Vue3.x路由跳转 2.获取参数 3. router-link 4.总结 1.Vue3.x路由跳转 不要this了，直接引用路由对象，看下图： importrouterfrom'@/router/index.js' 用这个路由对象router去push（剩下的和Vue2.x一样） ...
Vue中this.$router.push路由跳转,刷新参数消失
cainiaoysa的博客
06-11 3512
Vue中this.$router.push路由跳转,刷新参数消失 this.$router.push({name:"",params:{id:""}}) name和params搭配刷新参数会消失 this.$router.push({path:"",query:{id:""}}) path和query搭配，刷新页面参数不会消失，query中参数成了url中的一部分。 在项目中,通过一个列表进入详情页,携带参数id渲染不同的详情页,动态传参使用编程式跳转。 vue传参方法一 在router路由配置中。 { p
[Vue] this.$router.go(0)在苹果手机刷新失败
蓝胖子的博客
01-25 827
[Vue] this.$router.go(0)在苹果手机刷新失败
解决vue.js this.$router.push无效的问题
10-18
今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue+router路由跳转不起作用的一项原因
11-20
在这个问题中，我们将深入探讨为什么在某些情况下，`vue-router`的路由跳转可能不起作用，以及如何通过设置`mode: 'history'`和配置服务器来解决这个问题。 首先，Vue Router有两种工作模式：`hash`模式和`history`...
vue-router路由参数刷新消失的问题解决方法
08-30
路由参数刷新消失的问题解决方法是 vue-router 中常见的问题，本篇文章将为您提供四种解决方案。 解决方案一：Session & 服务器渲染 传统的解决方案是使用 Session 和服务器渲染。在登录页和主页是单独的两个页面...
解决vue-router 嵌套路由没反应的问题
10-14
const router = new VueRouter({ mode: 'history', routes: [ { path: '/recom', component: Recom, // 假设Recom是父组件 children: [ { path: 'view', name: 'recomView', component: recomView }, { path...
vue开启keep-alive缓存时，关于子组件上使用:key=“id“的问题以及解决方案
weixin_45549481的博客
08-02 237
2、致命错误，修改URL的id时，缓存之前有数据，子组件销毁重建，请求接口也有数据，但是因为keep-alive缓存了组件实例而不是组件的数据，表格的数据丢失；2、:key=“timeStap”，结合activated、deactivated —— —— keep-alive缓存activated时，会重新请求。1、切换tag，会触发id的变更，再次切回来时，将会触发表格销毁重建，重新请求数据，局部刷新表格的缓存丢失；特定场景下，必须使用:key="id"时，可以考虑下面的两个方式。
第十四节：Vben Admin实战-系统管理之角色菜单绑定
最新发布
cui_win的专栏
08-02 233
权限管理部分，目前已经实现了角色，用户，菜单的管理，现在还剩余一个重要的部分，是角色和菜单的动态绑定。Vben Admin 演示案例部分，是在角色管理的抽屉弹出框实现的，但是感觉展示不够直观，我们这里用一个单独的页面实现这部分的功能。src/api/sys/role.ts 文件中定义：# 角色菜单关联表现在权限管理部分的功能基本已经都实现了，还记得第七节：Vben Admin权限-后端获取路由和菜单。
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 432
SignList这三个页面就是需要切换的页面。
vue+eacharts+springboot柱状图展示
qq_42666729的博客
08-01 769
backgroundColor: 'rgba(0,122,280,0.6)', // 文本标签的背景颜色。data: this.chartData1.yData, // y轴数据。position: 'top', // 可以根据需要设置数值显示的位置。data: this.chartData1.xData, // x轴数据。color: 'black' // 设置x轴颜色为黄色。color: 'red', // 设置y轴颜色为黄色。color: '#000', // 设置字体颜色为黑色。
h5中this.$router.push为什么失效
06-06
在H5中，`this.$router.push`失效可能有以下几种原因： 1. 没有正确引入Vue Router：在使用Vue Router时，需要先引入Vue Router并将其安装到Vue实例中，如果没有正确引入Vue Router或者没有正确安装，就会导致`this.$router.push`失效。 2. 传递的参数不正确：在使用`this.$router.push`时，需要传递一个包含路径和参数的对象，如果传递的参数不正确，就会导致`this.$router.push`失效。 3. 路由配置不正确：在使用Vue Router时，需要正确配置路由，如果路由配置不正确，就会导致`this.$router.push`失效。 4. 使用了错误的路由模式：在Vue Router中，有两种路由模式：hash模式和history模式。如果使用了错误的路由模式，就会导致`this.$router.push`失效。 以上是一些可能导致`this.$router.push`失效的原因，可以根据实际情况进行排查和解决。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

浪子不顾及三毛

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

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

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

打赏作者

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

抵扣说明：

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

余额充值