vue路由跳转闪回，点击跳转的a标签以后页面跳转成功后又闪回到原页面

已于 2022-06-07 11:02:05 修改
阅读量2.1k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： vue.js 前端
于 2022-06-07 11:00:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44022713/article/details/125161362
版权

router-link和a标签路由跳转不能使用编程式路由导航。
只能使用to 或者 :to
如果使用了编程时路由导航传递参数，页面就会发生闪回。

星火要记得努力
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue跳转页面之后返回_为什么用vue路由跳转到另一个页面后马上又回到原来的页面？...
weixin_29876341的博客
12-29 5346
我发现是在路由配置那里添加了一句 mode: 'history'注释掉就没这个问题了，但是前端用了这句代码，后台没有配置，页面不是应该报错404吗，为什么只是跳转到原先的页面Vue.use(Router)export default new Router({// mode: 'history',routes: [{path: '/',name: 'Login',component: Login}...
给a链接绑定点击事件进行路由跳转，跳转成功但是马上又返回首页
m0_72818021的博客
07-18 89
跳转到search的时候，确实跳转了，但是又立刻返回主页了。把a标签的href属性给删了就行。
前端 Vue路由返回恢复页面状态的实现方案
最新发布
m0_75011249的博客
05-07 824
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue路由跳转本来正常,跳转到某一个页面再跳出其他页面,出现页面空白
zhangyu_98的博客
03-11 3080
昨天在写代码的时候遇到一个很奇怪的问题,本来路由都是正常的,结果我跳转到某一个页面后再跳出结果就页面空白了,也不能再跳回原来的页面,刷新后页面又能够正常显示了,后面也筛选了路由的书写都没发现异常. 后面看到页面的时候发现我在template内的根元素外面有一个注释,删除之后就正常了,后面想到html也会吧注释的内容当成一个标签进行显示,这样的话我的template下面就有了两个根元素,但是vue3是已经支持多个根元素了, 这里的原因可能是因为我的路由出口使用 transi...
html a标签链接点击闪动问题解决
qq_38472574的博客
07-24 1188
html a标签链接点击闪动问题解决
vue中跳转路由再次回到原页面，进行缓存相关问题
m0_52263688的博客
07-25 2572
vue中跳转路由再次回到原页面，进行缓存相关问题
Vue 路由 跳转【返回、刷新、跳转】
热门推荐
estrusKing的博客
03-23 1万+
Vue 路由 跳转【返回、刷新、跳转】this.$router.go(-1)this.$router.back()this.$router.pushthis.$router.replace this.$router.go(-1) 原页面表单中的内容会丢失； 向前或者向后跳转n个页面，n可为正整数或负整数 this.$router.go(-1)：后退+刷新 this.$router.go(0)：刷新； this.$router.go(1) ：前进 this.$router.back() 原页表表单中的内
vue页面跳转后返回原页面初始位置方法
11-28
通过以上步骤，我们实现了在Vue页面跳转后返回原页面时，页面能自动滚动到离开时的位置。这种方式结合了Vue的生命周期、Vuex的状态管理和Vue Router的`keep-alive`特性，确保了用户体验的连贯性。记得根据你的实际...
vue页面跳转实现页面缓存操作
11-20
在Vue.js应用中，页面缓存是一个常见的需求，特别是在页面状态需要在用户切换后保持的情况下。Vue提供了`keep-alive`组件来实现这一功能，它能够将组件的实例缓存下来，防止重新渲染。以下是对如何实现Vue页面跳转并...
vue路由拦截及页面跳转的设置方法
08-27
query: {redirect: to.fullPath} // 登陆成功后回到当前页面，这里传值给 login 页面，to.fullPath 为当前点击的页面 }); } } else { next(); } }); ``` 在上面的代码中，我们使用 beforeEach 钩子函数来拦截...
vue实现登录后页面跳转到之前页面
01-19
在开发中我们经常遇到这样的需求，需要用户直接点击一个链接进入到一个页面，用户点击后链接后会触发401拦截返回登录界面，登录后又跳转到链接的页面而不是首页，这种问题该如何去做呢？ 先说一下我们需要用到的几个...
解决路由重复跳转bug
u013729608的专栏
05-09 1490
经过思考，项目其他地方应该是调用路由跳转的方法，例如。
vue初始化页面闪动问题
qq_51441159的博客
11-14 1384
vue初始化页面闪动问题
vue 跳转路由后返回上一页还是当前页面，但是路由地址有改变（已解决）
weixin_45923100的博客
12-08 8408
在使用beforeRouteLeave()跳转前拦截的时候一定要注意，要执行next()这个回调函数，它的意思是执行跳转的意思，你不写，就不会发生跳转。
VUE项目初加载页面闪烁问题
Ride_The_Wind的博客
03-24 9368
一、前言 写项目的会经常使用到v-if进行判断，但是因为加载或编译原因会导致页面最初加载的时候出现闪烁问题； 二、解决办法 使用v-cloak，我的理解是：只有编译没完成时才有，用了css将它隐藏，这样编译成功后才显示，所以解决了闪烁问题；大佬给出的解答是：v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。 用
vue解决第一次加载屏幕闪烁问题
rightcat111的博客
08-29 2807
vue解决第一次加载屏幕闪烁问题
vue页面闪屏、闪退的解决方案、v-cloak、v-text、v-if、v-else
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
06-01 4666
描述v-if与v-show的区别使用v-if解决闪屏 2、花括号闪退 v-cloak v-text
手机上普通h5页面a标签href方式跳转页面会请求两次解决办法
xcdm100的博客
03-31 772
span class="buy bargain-btn" >去充值</span>必须把a标签的href事件屏蔽掉，解决办法是使用onclick方法，替代href事件，实现页面跳转。
Vue跳转到另一页面后如何返回原来的页面
qq_44573359的博客
07-06 4487
将跳转前的url路径编码后作为query参数传到另一页面中，在另一页面中解码参数获得跳转前的url路径，利用window.open()跳转回原来的页面。 2.解码
vue路由跳转后页面白屏
08-20
引用中提到，页面白屏的原因是因为路由无法匹配到正确的路径。当使用next(to.path)强制再次进入路由守卫时，可能会导致死循环，进而导致浏览器无法正常显示页面。 引用中指出，当刷新页面时，控制台会输出错误信息，提示找不到匹配路径的路由。这可能是由于路由配置不正确，或者路由守卫没有正确触发。 引用中提到，在控制台报错时，并没有进入路由守卫的情况。因此，在路由守卫中配置任何内容或重新添加动态路由到session或vuex中都是无效的，因为在进入路由守卫之前就已经出现了错误。 综上所述，vue路由跳转后页面白屏可能是由于路由配置错误，路由守卫未正确触发或者存在其他代码问题导致的。如果遇到这个问题，可以检查路由配置是否正确，确保路由守卫能够正常触发，并检查其他可能导致页面白屏的代码问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路，切实可行！](https://blog.csdn.net/qq_37150410/article/details/128012829)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值