vue中用reload自动刷新页面

于 2024-04-26 16:52:01 发布
阅读量360 收藏 9
点赞数 4
文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59227359/article/details/138223722
版权

今天学习的时候，给系统添加了一个批量删除的功能，但是删除之后页面不能自动刷新，于是找到了以下的方法自动刷新页面

在批量删除的函数中添加

window.location.reload();

0aed23f09d0b4787b1666e26241729c4.png

 虽然是整个页面大刷新，但是起码解决了目前的问题，以后学到新的在慢慢优化吧

Ohh868
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue刷新页面的三种方式，并处理死循环
Zzzzzzzzzzzke的博客
02-17 5432
vue页面刷新的办法和处理页面重复循环。先写一下刷新页面的方法，解决循环放在下边。 1.直接使用刷新当前页面，会有短暂白屏，体验效果不好 location.reload(); 2.通过路由传入0，刷新当前页面。忽悠短暂白屏，体验效果不好 this.$router.go(0); 3.通过provide / inject组合，这个体验感是最好的！ 第一步：先在App.vue里 给 <router-view> 加一个 if 判断，通过 $nextTick()实现先移除再添加达到刷新的
Vue页面刷新记住页面状态的实现
10-15
总结一下，实现Vue页面刷新后记住状态的主要步骤包括： 1. 使用`<keep-alive>`组件缓存路由组件。 2. 将页面状态保存到`sessionStorage`中。 3. 创建一个混入对象`paramsMemoryMixin`，处理参数的保存和恢复。 4. 在...
vue项目中刷新页面的方法
最新发布
mq1314520_zhl的博客
01-04 873
注意：这种方法也需要使用Vue Router，并且需要在main.js中引入router实例。这种方法的原理是先跳转到一个特定的路径，再返回上一个页面，从而达到刷新页面的目的。注意：这种方法需要使用Vue Router，并且需要在main.js中引入router实例。以上是一些常见的刷新页面的方法，在不同的场景下可以选择适合的方法使用。
vue中怎么刷新当前页面
m0_68094390的博客
05-13 1521
需要注意的是，使用window.location.reload()方法会重新加载整个页面，这可能会导致一些数据丢失或者状态重置。在Vue中，可以使用window.location.reload()方法来刷新当前页面。这个方法会重新加载当前页面，并且会重新执行所有的JavaScript代码。在上面的代码中，我们在组件中定义了一个按钮，当按钮被点击时，会调用refreshPage方法来刷新当前页面。在Vue组件中，可以在方法中调用window.location.reload()方法来刷新当前页面。
js刷新页面location.reload()用法
subsistent的博客
03-25 3857
本文介绍了js刷新页面函数location.reload()的用法，有关js location.reload()函数的例子，有需要的朋友参考下。在js中实现刷新页面的方法有很多种，在js中有一个location.reload()函数，它就可以实现我们想要的功能。例2，JS实现刷新iframe的方法。这种写法不会显示对话框。
强制刷新整个页面
weixin_55472979的博客
03-09 2223
强制刷新整个页面
Vue刷新当前页面解决方案
xcj_20160810的博客
05-18 1346
方法一：this.$router.go(0) 这个姿势是利用了 history 中前进和后退的功能，传入 0 刷新当前页面。但是有一个问题就是页面整个刷新过程中会白屏，严重影响用户的体验感，效果不好。 this.$router.go(0) 方法二：location.reload() 这个姿势是利用了直接使用刷新当前页面的方法。但是同样存在有一个问题就是页面整个刷新过程中会白屏，严重影响用户的体验感，效果也是不好，和姿势一的现象一直，也不推荐使用。 location.reload(.
vue通过路由实现页面刷新的方法
08-28
Vue 通过路由实现页面刷新的方法 在 Vue 项目中，页面刷新是一个常见的问题， especially when dealing with complex applications. 在本文中，我们将探讨通过路由实现页面刷新的方法，解决购物车页面跳转到详情页...
vue项目如何刷新当前页面的方法
08-27
Vue 项目刷新当前页面方法 在 Vue 项目中，刷新当前页面是非常常见的需求，例如在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。本文将介绍 Vue 项目如何刷新当前页面的方法。 问题...
关于vue2强制刷新,解决页面不会重新渲染的问题
10-16
今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue form 表单提交后刷新页面的方法
10-18
今天小编就为大家分享一篇vue form 表单提交后刷新页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
用javascript location.reload() 刷新页面
草根上的须子
11-10 204
刷新
实现自动刷新当前页面
黑玫瑰
05-12 110
1、this.$router.go(0) 在vue中可以使用此方法，但是safari不支持 2、window.location.reload()
vue当进入页面时强制刷新一次，相当于点击左上角刷新按钮一次
候郑青
06-28 2517
使用到方法有两种，一个是window.location.reload()方法和路由router.go(0)方法，但是直接在vue界面调用的话会进行刷新死循环，一直刷新。
vue2页面刷新
flhhly的博客
01-29 4372
vue页面刷新
vue5种方式实现页面“刷新“
lxs19930928的博客
12-04 6641
vue中五种方式实现页面“刷新” 1: 使用window.location.reload() 强制刷新 都会使页面有短暂的空白，体验效果不是特别好 home.vue <button @click="refreshPageHandler">刷新页面</button> methods: { refreshPageHandler() { console.log("点击刷新页面") window.location.reload() // 第一种
vue3 自动保存刷新页面
09-26
Vue3中实现自动保存和刷新页面的功能可以通过使用localStorage或Vue Router的路由导航守卫来实现。当页面刷新时，可以将页面状态存储在localStorage中，当页面重新加载时，可以从localStorage中读取并恢复页面状态。 具体实现方法如下： 1. 使用localStorage： 为了实现页面刷新时自动保存和刷新页面的功能，可以在Vue组件的created或mounted钩子函数中，将页面状态保存到localStorage中。同时，在Vue组件的beforeDestroy钩子函数中，可以将页面状态从localStorage中删除。 示例代码如下： ```javascript created() { const savedState = localStorage.getItem('pageState'); if (savedState) { // 恢复页面状态 this.pageState = JSON.parse(savedState); } }, beforeDestroy() { // 保存页面状态 localStorage.setItem('pageState', JSON.stringify(this.pageState)); } ``` 2. 使用Vue Router的路由导航守卫： Vue Router提供了路由导航守卫，可以在页面切换时保存和恢复页面状态。可以在beforeRouteLeave导航守卫中保存页面状态，在beforeRouteEnter导航守卫中恢复页面状态。 示例代码如下： ```javascript beforeRouteLeave(to, from, next) { // 保存页面状态 localStorage.setItem('pageState', JSON.stringify(this.pageState)); next(); }, beforeRouteEnter(to, from, next) { const savedState = localStorage.getItem('pageState'); if (savedState) { // 恢复页面状态 this.pageState = JSON.parse(savedState); } next(); } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值