Vue项目中强制刷新页面的方法

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

我们在动态切换组件的过程中,导航栏和底栏不动,动态切换中间区域的情况,在首页可以进行跳转任意组件,在组件与组件之间不能相互跳转,路由发生了变化,但是页面未改变,这时我们就需要强制刷新页面。

强制刷新页面的方式有三种:

①location.reload() 

②this.$router.go(0)

    前面两种方法都有些简单粗暴,主要说一下第三种方法

③provide 配合 inject

首先我们需要在App.vue中修改

Vue项目中强制刷新页面的方法,vue.js,前端,javascript

 通过定义reload方法,控制router-view的显隐(生成和销毁)

Vue项目中强制刷新页面的方法,vue.js,前端,javascript

 然后在需要刷新页面的组件中注入依赖,注入时inject后面是上面的方法名称

Vue项目中强制刷新页面的方法,vue.js,前端,javascript

最后直接调用reload方法就能实现页面的刷新

Vue项目中强制刷新页面的方法,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-610066.html

到了这里,关于Vue项目中强制刷新页面的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 前端项目部署自动检测更新后通知用户刷新页面(前端实现,技术框架vue、js、webpack)——方案二:轮询去判断服务端的index.html是否跟当前的index.html的脚本hash值一样

    当我们重新部署前端项目的时候,如果用户一直停留在页面上并未刷新使用,会存在功能使用差异性的问题,因此,当前端部署项目后,需要提醒用户有去重新加载页面。 vue、js、webpack 根据打完包之后生成的 script src 的hash值去判断 ,每次打包都会生成唯一的hash值,只要轮

    2024年01月23日
    浏览(32)
  • 前端页面点击刷新-触发vue生命周期加载最新数据

    需求背景:layout布局,页面头部通过定时器获取后端消息的伪消息通知功能,在点击消息时获取所有消息总数并且刷新页面,以便触发vue的生命周期重新获取所有消息,消息展示在content中。  要触发页面刷新,可以使用vue路由的router.push方法,添加一个动态的query参数,可以

    2024年02月21日
    浏览(38)
  • Vue刷新当前页面的方法

    在做项目的过程中会遇到很多需要重新刷新页面的地方,比如说弹出的登陆框,在登陆成功后要关闭弹窗,并且刷新页面,那么,有哪几种好用的方式来进行页面的刷新呢。 第一种,就是是新建一个空白的页面,跳转到改页面,然后再立马跳转回原页面,但是这个方式很显然

    2024年02月12日
    浏览(38)
  • Vue页面刷新常用的4种方法

    Vue项目里,有时候我们需要刷新页面,重新加载页面数据,常用方法如下: 使用 location.reload() 方法可以简单地实现当前页面的刷新,这个方法会重新加载当前页面,类似于用户点击浏览器的刷新按钮。 在 Vue 中,可以将该方法绑定到 Vue 实例上,比如在 Vue 的 methods 中添加如

    2024年02月12日
    浏览(28)
  • nginx 部署vue项目,页面白屏或者页面刷新出现404问题

    将vue项目打包部署到nginx上面运行 问题一: 运行时页面白屏。 问题二: 页面可以正常显示,当刷新页面的时候页面报404 错误。 页面白屏分析: 我们可以先查看一下nginx下的 logs/error.log 日志文件,确定我的问题是因为项目打包时候路劲配置问题。 页面404分析 :我们在将

    2024年02月15日
    浏览(28)
  • Vue项目nginx服务器部署刷新页面404错误

    最近想自己做点小项目练手,前端用的是vue框架,用nginx当做服务器来部署。但是当部署完成后,遇到了刷新页面和打开新页面报404错误的问题 问题就像上面描述的一样,刷新页面和打开新页面都是报404错误。 先说最终解决办法,在nginx的配置文件的location中改一下设置方式

    2024年02月17日
    浏览(43)
  • 【Vue】实现当前页面刷新的四种方法

    这两周在写一个后台管理,每次调用接口实现增删改查的过程中,都需要刷新当前页面或者刷新数据。如果手动点击浏览器的小圈圈不仅麻烦、用户体验感极差,而且不会真的有人让用户手动刷新叭。。。这个问题可以称得上是前端的bug了。那么,顺着这个问题,一通搜寻下

    2023年04月26日
    浏览(42)
  • VUE实现当前页面刷新的七种方法

            使用 location.reload() 方法可以简单地实现当前页面的刷新,这个方法会重新加载当前页面,类似于用户点击浏览器的刷新按钮。         在 Vue 中,可以将该方法绑定到 Vue 实例上,比如在 Vue 的 methods 中添加如下的方法:         然后在模板中调用该方法即

    2024年02月16日
    浏览(34)
  • vue/react项目刷新页面出现404的原因以及解决办法

    问题描述:vue/react项目,正常的页面操作跳转,不会出现404的问题,但是一旦刷新,就会出现404报错。 产生原因:我们打开vue/react打包后生成的dist文件夹,可以看到只有一个 index.html 文件及一些静态资源,这个是因为vue/react是单页应用(SPA),只有一个index.html作为入口文件,

    2024年02月06日
    浏览(41)
  • Vue 组件强制刷新方式

    🏆 文章目标:记录前端开发中遇见的问题。 🍀 Vue 组件强制刷新方式 ✅ 创作者:Jay… 🎉 个人主页:Jay的个人主页 🍁 展望:若本篇讲解内容帮助到您,请帮忙点个赞吧,您的支持是我继续写作的最大动力,谢谢。🙏 为实现动态页签组件,根据页签的类型获取对应的co

    2023年04月22日
    浏览(73)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包