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

最新推荐文章于 2024-03-08 11:21:43 发布
最新推荐文章于 2024-03-08 11:21:43 发布
阅读量1.7w 收藏 16
点赞数 3
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/confidence_fy/article/details/125162564
版权
我们在动态切换组件的过程中，导航栏和底栏不动，动态切换中间区域的情况，在首页可以进行跳转任意组件，在组件与组件之间不能相互跳转，路由发生了变化，但是页面未改变，这时我们就需要强制刷新页面。

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

    ①location.reload() 

    ②this.$router.go(0)

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

    ③provide 配合 inject

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

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

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

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

 

Hope瑶瑶瑶~☆
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue项目如何刷新当前页面的方法
08-27
主要介绍了vue项目如何刷新当前页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue-input框checkbox强制刷新问题
10-17
主要介绍了Vue-input框checkbox强制刷新问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
VUE实现当前页面刷新的七种方法
weixin_40381947的博客
07-18 2万+
需要注意的是，使用该方法会刷新整个页面，包括Vue实例、组件以及其他的页面元素，可能会导致一些不必要的开销，不是最优的解决方案。需要注意的是，该方法会重新加载整个页面，如果想要对页面局部进行刷新，可以考虑使用 Vue 自身的一些特性，比如通过设置组件的 key 属性实现组件的更新，或者通过调用。具体来说，当某个组件的数据发生变化，但是该组件的视图没有及时更新，导致页面没有被正确渲染时，可以在需要刷新的组件中调用。方法可以简单地实现当前页面的刷新，这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。
VUE实现强制渲染,强制更新
10-16
今天小编就为大家分享一篇VUE实现强制渲染,强制更新，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3视图强制刷新，解决数据跟新视图没变的情况
最新发布
bpluoxong的博客
03-08 836
此方法可以解决ref，reactive定义的响应式数据更新视图未更新的小问题。
Vue组件强制刷新（重新渲染）的四种方案对比
热门推荐
大道至简
05-21 5万+
Vue的双向绑定用着确实方便，但自动档虽好，手动档也不是一无是处；在特定的情况下，还真的要手工触发“刷新”操作，目前有四种方案可以选择：
vue强制刷新的方法、组件销毁
muzidigbig的博客
07-29 7410
在开发过程中,有时候会遇到这么一种情况：1.切换页面页面没有更新2.通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件,下面这篇文章主要给大家介绍了关于vue组件强制刷新的方案,需要的朋友可以参考下1.强制刷新页面，出现短暂的空白闪烁。2.h5页面在安卓机方法不兼容。 vue组件会在什么时候下被销毁? 1.页面关闭 2.路由跳转 3.v-if为false 4.改变key值
vue项目刷新当前页面的三种方法
weixin_52103939的博客
03-30 1万+
1、最直接整个页面重新刷新。 location. reload(); this.$router.go(0); // 这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好。 2、新建一个空白页面，点击确定的时候先跳转到这个空白页，然后再立马跳转回来。这个方式，相比第一种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，也可采用。 3、provide / inject 刷新相对比较理想。 //首先在app.vue进行修改 &lt
Vue 强制刷新(重新渲染)的方式
LonewoIf的博客
08-05 2万+
Vue 强制刷新(重新渲染)的方式
vue强制刷新（更新数据）的三种方式
qq_40224032的博客
04-04 1万+
vue强制刷新（更新数据）的三种方式及用法
vue组件强制刷新的5种方案
黎小小的博客
01-30 4179
Vue底层是双向绑定；
关于vue2强制刷新,解决页面不会重新渲染的问题
10-16
今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue强制刷新组件的方法示例
10-17
主要介绍了vue强制刷新组件的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目强制清除页面缓存的例子
10-16
今天小编就为大家分享一篇vue项目强制清除页面缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 刷新页面的三种方法
欢迎光临本仓鼠的地盘～
03-01 1012
1、location. reload() / this.$router.go(0) 相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好 2、先跳到空白页面，再跳回原页面 （1）新建一个空白页面 reload.vue： （2）需要刷新的页面，先跳转到reload.vue，再跳转回原页面，从而实现刷新（路径上带param的不能用）： 3、provide/inject组合（最优） （1）App.vue添加provide，和data一样，返回一个对象： （2）需要刷新的
vue5种方式实现页面“刷新“
lxs19930928的博客
12-04 6516
vue中五种方式实现页面“刷新” 1: 使用window.location.reload() 强制刷新 都会使页面有短暂的空白，体验效果不是特别好 home.vue <button @click="refreshPageHandler">刷新页面</button> methods: { refreshPageHandler() { console.log("点击刷新页面") window.location.reload() // 第一种
vue强制刷新页面
xiaohuihui_z的博客
09-25 4313
Vue刷新页面的三种方式 亲测有效 我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。 1.原始方法： location.reload(); 2.vue自带的路由跳转： this.$router.go(0); 用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。 所以，我们选择第三种方式： 3.首先在App里面写下如下代码：(局部刷新) 接下来，我们就可以在需
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 ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值