关于vue路由跳转后的页面不会刷新的解决办法

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

做uni项目的时候遇到的情况:1,父组件页面刷新了之后 需要触底加载的子组件能触底加载,否则不能加载。2,子组件不能触底加载,只需要刷新之后就能触底加载。以上的刷新不包括下拉刷新。3. 可能因为包了一层tab页导致跳转进页面没有请求数据的问题。

我的解决办法是:

watch: {
   $route(to, from) {
       window.location.reload(); //监测到路由发生跳转时刷新一次页面
   },
},

导致的问题是:跳转过去的页面会刷新一次,导致体验不好,但是因为下拉刷新也没办法解决请求不到数据的情况,所以抖一下就抖一下吧(不是,只是我没有更好的办法了)

其他办法:转载https://www.jb51.net/article/216962.htm

1、使用activated:{}周期函数代替mounted:{}函数即可。

2、监听路由文章来源地址https://www.toymoban.com/news/detail-514074.html

watch: {
    '$route' (to, from) {
    // 路由发生变化页面刷新
    this.$router.go(0);
        }
},


// 该方法会多一次请求
watch: {
    '$route' (to, from) {
    // 在mounted函数执行的方法,放到该处
    this.qBankId = globalVariable.questionBankId;
    this.qBankName = globalVariable.questionBankTitle;
    this.searchCharpter();
    }
},

Vue this.$router.push路由跳转,刷新参数消失

this.$router.push({name:"",params:{id:""}})

this.$router.push({path:"",query:{id:""}})

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

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

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

相关文章

  • VUE路由跳转并刷新页面(框架层实现)

    前言         网上找了很多办法,都需要开发者在页面内单独实现,或者是刷新整个浏览器,感觉并不是特别舒服。因此,我考虑可以在框架层去实现路由跳转刷新。         思路如下:                 1、重定向至临时界面(用户无感知)                 2、打开临时

    2024年02月11日
    浏览(56)
  • vue通过router地址传参跳转同一路由页面,页面不刷新的解决办法

    vue、 vue-router@4 记录一下最近遇到的vue路由页面间的跳转的问题,其中就涉及到了不同路由的跳转(/a/b1 = /a/b2)、相同路由不同参数间的跳转(/a/b?c=1 = /a/b?c=2)、相同页面锚点跳转(/a/b#id1 =/a/b#id2) 原因:渲染的是同一组件 解决:可以在不刷新的页面通过监听route,重新加载

    2024年02月04日
    浏览(58)
  • vue3在运行时路由可以正常跳转,但是页面空白,刷新页面恢复正常[已解决]

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

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

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

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

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

    2024年04月28日
    浏览(54)
  • 020:vue刷新跳转当前页面

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

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

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

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

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

    2024年02月08日
    浏览(46)
  • vue 动态路由刷新失效及404页面处理

    在开发后台管理项目,我们会使用vue动态路由做权限管理,但是使用vue动态路由时会遇到一些坑,这里总结一下,并提供解决思路 问题:刷新页面时会把addRouter添加的动态路由刷新掉,因此浏览器找不到之前添加的路由,便会进入白屏页面或者404页面 处理方式:判断是否刷

    2024年02月12日
    浏览(52)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包