vue路由跳转后,刷新指定页面。

这篇具有很好参考价值的文章主要介绍了vue路由跳转后,刷新指定页面。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        做项目遇到一个坑:A页面带参跳转到B页面,第二次跳转时的参数与第一次时的参数不同,但是后台查询时还是使用的第一次的参数。需要手动刷新之后,才会使用第二次参数。

        鉴于时间原因直接使用刷新页面监听路由的方法。在准备跳转的A页面添加路由跳转监听事件,达到每次A页面跳转B页面时,B页面都会再次重新加载页面。

vue跳转页面并刷新,前端,javascript,开发语言,vue.js

        添加完成后,A页面跳转B页面,B页面成功刷新。正当我高兴的以为又解决了一个bug时,突然发现我从A页面跳转到C页面时,C页面竟然也在发生页面刷新现象。当时着实是将小主吓了一大跳。要知道正是因为要填写C页面的数据,才从A页面跳转到B页面。现在C页面的数据填写到一半,去A页面查询数据返回到C页面,C页面的数据一下子全给干没了。那之后客户使用后还不得把我的工资给干没了。这种情况属实不能发生,想想都有点可怕。

        于是赶紧去找办法,苦寻无果。想到 this.$router.go()是个方法,那我能不能看下this.$router里面都有什么属性?果断在B页面打印:

window.console.log(this.$router)

vue跳转页面并刷新,前端,javascript,开发语言,vue.js

结果:

vue跳转页面并刷新,前端,javascript,开发语言,vue.js

         发现在history.current属性下面正好有当前页面的路径、名字、请求参数,有了这些就好办了。于是就有了这个:

vue跳转页面并刷新,前端,javascript,开发语言,vue.js

        还是在A页面,原来的方法里面加个判断条件。如果需要刷新的页面标签名/页面路径 正好等于路由获取的页面标签名/页面路径。 那时才会发生跳转。

        code完测试,beautiful!!! 工资保住了,今天又是美好的一天。文章来源地址https://www.toymoban.com/news/detail-520243.html

到了这里,关于vue路由跳转后,刷新指定页面。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3在运行时路由可以正常跳转,但是页面空白,刷新页面恢复正常[已解决]

    vue3在运行时路由可以正常跳转,但是页面空白,刷新页面恢复正常,在网上寻找很久说是keepAlive的原因,后来看了看我的代码~ 原来的代码: 改后的代码: 由此可见,根元素一定要由一个div去包裹住! template必须有且只能有一个div 在这样才会正常显示~ 原理: 这里我们要先

    2023年04月27日
    浏览(17)
  • Vue 解决route-link路由跳转时页面不刷新问题

    1.分析 在使用route-link跳转路由时,每次跳转,页面都不会刷新。是因为路由跳转并非页面刷新,而我们获取数据的方法都是写在created钩子函数中,所以,created并不会每次都执行,从而导致页面数据没有刷新。 2.解决方法 在router-view标签中加入:key=\\\"$route.fullPath\\\"即可

    2024年02月11日
    浏览(17)
  • vue-element-admin vue设置动态路由 刷新页面后出现跳转404页面Bug 解决方法

    做项目时遇到的这个bug,因为除了跳404之外也没太大影响,之前就一直放着没管,现在项目基本功能实现了,转头处理了一下,现在在这里记录一下解决方法 这个bug的具体情况是:设置了动态路由之后,不同的用户登录之后显示了不同的侧边栏,在侧边栏点击菜单,渲染对应

    2024年04月28日
    浏览(10)
  • 「Vue|网页开发|前端开发」02 从单页面到多页面网站:使用路由实现网站多个页面的展示和跳转

    本文主要介绍如何使用路由控制来实现将一个单页面网站扩展成多页面网站,包括页面扩展的逻辑,vue的官方路由vue-router的基本用法以及扩展用法 「Vue|网页开发|前端开发」01 快速入门:快速写一个Vue的HelloWorld项目 我们在进行网站开发的时候,大多数都是需要有多个页面

    2024年02月11日
    浏览(18)
  • 020:vue刷新跳转当前页面

    第020个 查看专栏目录: VUE ------ element UI 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,upda

    2024年02月09日
    浏览(15)
  • 【微信小程序】通过使用 wx.navigateTo方法进行页面跳转,跳转后的页面中通过一些方式回传值给原页面

    以下是几种常见的回传值的方式: 使用 wx.navigateTo 方法传递参数: 在跳转时,可以在目标页面的 URL 中携带参数,然后在目标页面的 onLoad 方法中获取参数,并在目标页面中进行处理。例如: 在目标页面的 onLoad 方法中获取参数: 使用 wx.navigateBack 方法回传值: 在目标页面中

    2024年02月13日
    浏览(16)
  • 解决vue3项目跳转同一页面数据不刷新的问题

            原因:router-view使用了keep-alive组件,会被缓存,而vue-router的切换不用于传统的页面切换。是路由之间的切换,组件之间的切换,引用相同组件的时候,会被直接调用缓存里面的而不会调用created(),onMoun ted()函数。         如图所示:要实现的功能是点击每一个

    2024年02月11日
    浏览(10)
  • vue跳转页面后返回不刷新且记录历史滚动条停留位置 (实现了根据不同页面来设置是否刷新记录的功能)

            1.在路由(router/index.js)中,对不刷新的页面设置:         2.在app.vue中设置: 这时返回就不会触发created和mounted         1.在data中定义         2.挂载: 以上就实现了返回页面后滚动条记忆的功能啦! 如果想实现分情况决定是否记忆滚动条以及刷新组件数据

    2024年02月08日
    浏览(17)
  • Selenium页面跳转后的元素定位-switch_to.window()使用

    在使用Selenium获取网页数据时常常会因为页面跳转导致,后续的页面数据无法正常获取。究极原因,都是因为此时的页面对象还是上一个页面,使用当前页面的定位条件当然会报错(因为上一个页面根本不存在这些定位条件)。因此我们可以通过switch_to.window()进行页面的切换

    2023年04月09日
    浏览(13)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包