Vue：刷新页面 且只刷新一次

最新推荐文章于 2026-03-29 15:42:07 发布
原创 最新推荐文章于 2026-03-29 15:42:07 发布 · 1.2w 阅读 · 17 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue #web
本文介绍了一种解决Vue组件初次加载显示不完全的问题的方法。通过在mounted钩子中加入特定代码来确保页面只刷新一次，从而避免了无限循环刷新的情况。

问题：当初次进去系统时，vue组件显示不完全（右侧没滚动条，没法向下滚动）

此方法不是最优解决方案。治标不治本！

解决思路：在代码里加上只刷新一次

 mounted: function() {
                location.reload();
        },

上面会一直刷新陷入死循环

正确写法：

 mounted: function() {
            if (location.href.indexOf("#reloaded") == -1) {
                location.href = location.href + "#reloaded";
                location.reload();
            }
        },
Vue中实现【组件局部刷新】及【页面刷新】
qq_39454432的博客
04-09 6533
Vue中实现【组件局部刷新】及【页面整体刷新】
利用js实现进入页面首先执行刷新操作，且只刷新一次
weixin_30877181的博客
03-05 2616
让页面进行刷新，可以使用location.reload()方法，但是这种方法会让页面一直不断的刷新，这是因为当页面加载完成以后，我们让它刷新一次，那么浏览器就会重新向服务器请求数据， 界面会重新加载，然后，加载完成又调用了location.reload()方法，这样就陷入了死循环，一直处于请求然后刷新的状态。 为了解决这样的问题，我们使用下面这种方式： $(document).ready(...
vue刷新页面的三种方式，并处理死循环
Zzzzzzzzzzzke的博客
02-17 5887
vue页面刷新的办法和处理页面重复循环。先写一下刷新页面的方法，解决循环放在下边。 1.直接使用刷新当前页面，会有短暂白屏，体验效果不好 location.reload(); 2.通过路由传入0，刷新当前页面。忽悠短暂白屏，体验效果不好 this.$router.go(0); 3.通过provide / inject组合，这个体验感是最好的！ 第一步：先在App.vue里 给 <router-view> 加一个 if 判断，通过 $nextTick()实现先移除再添加达到刷新的
Nginx代理Vue开发环境无限刷屏与请求死循环异常问题解决
最新发布
weixin_42461930的博客
03-29 369
摘要： Vue本地开发中，通过Nginx代理8080端口时出现两大异常：1）代码修改触发页面无限刷新；2）删除dist后仍能访问旧页面。直接访问8080端口则正常。问题根源在于：1）Nginx未配置WebSocket转发，导致Vue热更新（HMR）连接失败触发刷新循环；2）开发环境误用生产环境的强缓存策略。解决方案需分环境配置：开发环境需添加proxy_set_header Upgrade $http_upgrade支持WebSocket，并设置Cache-Control: no-store禁用缓存；生产环
vue当进入页面时强制刷新一次，相当于点击左上角刷新按钮一次
候郑青
06-28 3332
使用到方法有两种，一个是window.location.reload()方法和路由router.go(0)方法，但是直接在vue界面调用的话会进行刷新死循环，一直刷新。
vue项目强制刷新页面
weixin_44264769的博客
08-23 1222
vue项目强制刷新页面。下面所写代码对应场景比较少见，首页在登录与不登录时展示的样子不一样，当牵扯的内容过多时，选择了双重判别进行强制刷新。针对其他情况只需要对第一层if内容进行重写即可。
Vue刷新页面的三种方式
热门推荐
坏小哥
06-08 22万+
我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。 原始方法： location.reload(); vue自带的路由跳转： this.$router.go(0); 用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。 所以，我们选择第三种方式： 3. 首先在App里面...
vuejs进入页面只刷新一次
weixin_45682701的博客
10-15 2268
vuejs进入页面只刷新一次想要效果代码实现 想要效果 登录进入页面后自动刷新一次页面，不重复刷新。 代码实现 1.在login页面 登录成功时向sessionStorage赋值 sessionStorage.setItem('create',1) 2.进入到默认页面，在mouthed钩子函数中添加以下代码 if(sessionStorage.getItem('create')==1){ sessionStorage.removeItem('create')
VUE实现页面局部刷新
Swallow的博客
10-23 1万+
vue实现页面刷新 在我的页面里有使用过三种页面刷新的方法，接下来挨个介绍下： 一、当前窗口刷新 window.location.reload() //页面刷新 二、路由切换方式 this.$router.push("需要刷新的页面地址"); //页面刷新 以上两种方式都可以有页面刷新的效果，但是缺点就是会出现空白页，第三种方式就可以解决这一缺点，我们一起来看看。。。 三、provide / inject 组合方式 首先在你的App.vue页面添加v-if=“isRouterAlive”，如以下代码
Vue的数据更新了但页面没有更新及数据频繁更新而页面只更新一次
m0_56698268的博客
03-27 2598
Vue的数据更新了但页面没有更新的原因整理
vue第一次进入页面只刷新一次
qq_43405603的博客
08-16 1135
if (location.href.indexOf("#reloaded") == -1) { location.href = location.href + "#reloaded"; location.reload(); }
vue、react中切换语言，界面刷新内容空白问题
lixinhua_man的博客
11-04 1004
vue、react中切换语言，界面刷新内容空白问题
vue5种方式实现页面“刷新“
lxs19930928的博客
12-04 7117
vue中五种方式实现页面“刷新” 1: 使用window.location.reload() 强制刷新 都会使页面有短暂的空白，体验效果不是特别好 home.vue <button @click="refreshPageHandler">刷新页面</button> methods: { refreshPageHandler() { console.log("点击刷新页面") window.location.reload() // 第一种
JavaScript 中 location.reload() 的坑
酹江月的博客
08-10 1656
Using reload() without any arguments retrieves the current page from the browser’s cache, if it’s available there. To avoid this and get the page directly from the server, you can call reload with th...
vue 进入页面自动刷新并且只刷新一次
CMDN123456的博客
07-24 2153
vue 进入页面自动刷新并且只刷新一次
vue 导航菜单重新加载刷新页面
疏雨萧萧千行泪
08-29 1万+
知识库项目点击导航菜单栏上点击子菜单刷新页面的需求 应用 vue在当前页面内路由参数发生变化，怎么进行页面刷新。 传统方式 window.location.reload(); 整个页面进行刷新，会出现白屏，体验不好 this.$router.go(0); 同上，体验不友好 推荐方法 使用provide / inject组合方式 原理：允许一个祖先组件向其子孙后代注入一个依赖，不论组件层次有...
vue刷新当前页面
Maisu的博客
01-16 9219
通过location.reload和$router.go(0)都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5键刷新页面优点:足够简单缺点:会出现页面空白,用户体验不好通过$router.replace方法,跳转一个空白页面,然后再调回之前页面,它利用vue-router切换页面会把页面销毁并新建新页面的特性优点:不会出现页面空白,用户体验好缺点:地址栏会出现快速切换的过程。
js刷新页面location.reload()用法
subsistent的博客
03-25 4824
本文介绍了js刷新页面函数location.reload()的用法，有关js location.reload()函数的例子，有需要的朋友参考下。在js中实现刷新页面的方法有很多种，在js中有一个location.reload()函数，它就可以实现我们想要的功能。例2，JS实现刷新iframe的方法。这种写法不会显示对话框。
函数只运行一次
littlebearGreat——宁静致远
02-10 1373
if(!window.name){ window.name = 'test'; } 这个函数只在页面加载的时候运行一次。 window.location.reload();不会引起它的运行
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值