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

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

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

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

①location.reload() 

②this.$router.go(0)

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

③provide 配合 inject

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

 

通过定义reload方法，控制router-view的显隐（生成和销毁）

 

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

 

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

 

 

 

 

Y2000104
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue项目如何刷新当前页面的方法
08-27
主要介绍了vue项目如何刷新当前页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目刷新当前页面的三种方法
10-17
主要介绍了vue项目刷新当前页面的三种方法，本文图文并茂给大家介绍的非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现在进入页面之前自动刷新一次页面（适用于首次进入页面空白，刷新才显示的问题）
最新发布
青莳的博客
03-27 447
有时候会莫名出现一个问题，首次进入页面的时候空白，刷新才会显示，如果实在排查不到原因，以及如何解决，那就直接在进入页面之前去自动执行一次刷新操作，实现方法如下。ps：如果不通过localStorage记录，会导致无限刷新页面。此方法不仅仅适用于vue，只要是js都可以使用。
详解vue几种主动刷新的方法总结
12-03
当我们在做项目时，我们需要做当前页面的刷新来达到数据更新的目的，在此我们大概总结了几种常用的页面刷新的方法。 1.[removed].reload(),是原生JS提供的方法，this.$router.go(0):是vue路由里面的一种方法，这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入。 2.通过路由跳转的方法刷新，具体思路是点击按钮跳转一个空白页，然后再马上跳回来： 当前页面： <template> <div> <el-button type="primary" class="btn" @click
vue组件强制刷新的5种方案
黎小小的博客
01-30 3466
Vue底层是双向绑定；
vue强制刷新页面
xiaohuihui_z的博客
09-25 4290
Vue刷新页面的三种方式 亲测有效 我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。 1.原始方法： location.reload(); 2.vue自带的路由跳转： this.$router.go(0); 用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。 所以，我们选择第三种方式： 3.首先在App里面写下如下代码：(局部刷新) 接下来，我们就可以在需
VUE实现强制渲染,强制更新
10-16
今天小编就为大家分享一篇VUE实现强制渲染,强制更新，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 强制刷新(重新渲染)的方式
热门推荐
LonewoIf的博客
08-05 2万+
Vue 强制刷新(重新渲染)的方式
vue强制刷新（更新数据）的三种方式
qq_40224032的博客
04-04 1万+
vue强制刷新（更新数据）的三种方式及用法
vue当进入页面时强制刷新一次，相当于点击左上角刷新按钮一次
候郑青
06-28 2194
使用到方法有两种，一个是window.location.reload()方法和路由router.go(0)方法，但是直接在vue界面调用的话会进行刷新死循环，一直刷新。
关于vue2强制刷新,解决页面不会重新渲染的问题
10-16
今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue-input框checkbox强制刷新问题
10-17
主要介绍了Vue-input框checkbox强制刷新问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue强制刷新组件的方法示例
10-17
主要介绍了vue强制刷新组件的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目强制清除页面缓存的例子
10-16
今天小编就为大家分享一篇vue项目强制清除页面缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 中如何对局部组件强制刷新
知行大侠的博客
12-09 3894
vue 中如何对局部组件强制刷新1.使用this.$forceUpdate强制重新渲染2.使用v-if指令 使用vue进行开发时，如果要刷新当前路由，则调用router.go(0)方法即可。但是某些情况下，我们可能要求仅仅刷新某个组件，而不是路由，那么我们应该怎么做呢？ 1.使用this.$forceUpdate强制重新渲染 如果要在组件内部中进行强制刷新，则可以调用this.$forceUpdate()强制重新渲染组件，从而达到更新目的。 <template> <button @clic
vue强制刷新的方法、组件销毁
muzidigbig的博客
07-29 7205
在开发过程中,有时候会遇到这么一种情况：1.切换页面页面没有更新2.通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件,下面这篇文章主要给大家介绍了关于vue组件强制刷新的方案,需要的朋友可以参考下1.强制刷新页面，出现短暂的空白闪烁。2.h5页面在安卓机方法不兼容。 vue组件会在什么时候下被销毁? 1.页面关闭 2.路由跳转 3.v-if为false 4.改变key值
vue项目强制刷新页面
weixin_44264769的博客
08-23 957
vue项目强制刷新页面。下面所写代码对应场景比较少见，首页在登录与不登录时展示的样子不一样，当牵扯的内容过多时，选择了双重判别进行强制刷新。针对其他情况只需要对第一层if内容进行重写即可。
vue3强制刷新页面
08-20
在Vue3中，可以使用`location.reload()`或者`this.$router.go(0)`来强制刷新页面。这两种方法都会重新加载整个页面，类似于按下Ctrl+F5进行强制刷新，可能会出现瞬间的空白页面，体验不好。另外，也可以使用provide/inject组合来实现页面的刷新。具体的方法是，在App.vue中声明一个reload方法，通过控制router-view的显示或隐藏来控制页面的重新加载。然后，在需要刷新的页面中使用inject注入App.vue组件提供的reload依赖，并直接调用reload方法即可实现页面的刷新。总结起来，以上所述就是Vue3中刷新当前页面的三种方法。 然而，需要注意的是，尽管以上方法可以达到刷新页面的目的，但是会重新加载整个页面，可能会出现瞬间的空白页面，体验不好。因此，建议在使用时权衡利弊，选择最适合项目需求和用户体验的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3.2 项目刷新当前页面的三种方法](https://blog.csdn.net/weixin_42365757/article/details/126121541)[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_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue项目刷新当前页面的三种方法](https://blog.csdn.net/weixin_44635214/article/details/106471392)[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_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Y2000104

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

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

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

打赏作者

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

抵扣说明：

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

余额充值