vue 刷新页面的三种方法

最新推荐文章于 2024-05-11 08:15:27 发布
最新推荐文章于 2024-05-11 08:15:27 发布
阅读量1k 收藏 1
点赞数
分类专栏： VUE 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42993858/article/details/114265142
版权
1、location. reload() / this.$router.go(0)

相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好

2、先跳到空白页面，再跳回原页面

（1）新建一个空白页面 reload.vue：

image.png

（2）需要刷新的页面，先跳转到reload.vue，再跳转回原页面，从而实现刷新（路径上带param的不能用）：

image.png

3、provide/inject组合（最优）

（1）App.vue添加provide，和data一样，返回一个对象：

image.png

（2）需要刷新的页面内注入inject依赖：

image.png

吃橙子的仓鼠
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue刷新页面
Fang格子的博客
03-18 331
尝试了vue-router重新路由到当前页面但页面并没有进行刷新、用window.reload()、router.go(0)刷新，浏览器重新加载了，体验不好 于是百度到声明reload方法，控制router-view的显示、隐藏 首先在App.vue里声明reload()方法 <template> <div id="app"> <router-vi...
vue页面刷新
weixin_52767262的博客
03-24 1万+
vue页面刷新 首先我们都知道vue属于单页面应用，默认境况下是不会触发刷新页面操作的，所以这个时候就需要我们通过事件来触发reload()来达到刷新操作 接下来我就为大家介绍三种刷新页面的方法 1. wiindow.location.reload([bForceGet]) 该方法强迫浏览器刷新当前页面 bForceGet 可选参数，默认为false,从客户端缓存里取当前 true,则以get方式，从服务器端获取最新的页面，相当于页面f5刷新 wiindow.location.replace(URL)
2024年Web前端最全vue项目如何刷新当前页面，2024大厂前端知识点总结+面试题解析
最新发布
2301_79985012的博客
05-11 318
现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好。但是，试过的会发现用vue-router重新路由到当前页面，页面是不进行刷新的，根本没有任何作用~所以这个方法out！这个方式，相比第一种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，可采用。
vue刷新当前页面
hyduan_h5的博客
01-12 1288
我们经常遇到此种情形，当新增编辑完成后，需要重新刷新页面数据，重新调用接口较多时，挨个调用过于繁琐；
vue项目刷新当前页面
weixin_38300263的博客
10-23 213
需求场景： 有时候我们在vue项目页面做了一些操作，需要刷新一下页面。 解决的办法： this.$router.go(0)。这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好； 本次采用 this.$router.replace()的方法来实现 首先创建Refresh.vue 文件 <template> <p v-show="fals...
Vue 之 页面刷新、跳转方法
weixin_44756169的博客
06-27 4007
一、页面刷新 1、window.location.reload()；和this.$router.go(0) 偶尔页面会闪烁一下，用户体验不好 2、provide/inject ：不会出现空白页面 App.vue中声明reload方法，是使用isRouterAlive来控制路由的显示和隐藏，从而实现当前页面再加载了一遍，实现了刷新 # （1）在App.vue页面中声明reload方法： ...
vue项目刷新当前页面的三种方法
10-17
主要介绍了vue项目刷新当前页面的三种方法，本文图文并茂给大家介绍的非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
详解vue几种主动刷新的方法总结
12-03
在Vue开发过程中，有时需要...以上就是Vue中几种常见的主动刷新页面的方法，开发者可以根据实际需求和用户体验选择合适的方式。在处理动态数据和列表操作时，优先考虑不涉及整个页面刷新的策略，以保持良好的用户体验。
vue刷新页面的几种常用方法
05-04
总之，Vue刷新页面的方法主要依赖于JavaScript的内置功能，如`location.reload()`或`window.location.reload()`，以及Vue Router的导航功能。而针对组件内部的刷新，可以通过改变数据或利用Vue的响应式特性来实现...
vue项目如何刷新当前页面的方法
08-27
Vue 项目刷新当前页面方法 在 Vue 项目中，刷新当前页面是非常常见的需求，例如在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。本文将介绍 Vue 项目如何刷新当前页面的方法。 问题...
vue 刷新当前页面的方式
qq_45327886的博客
11-04 4186
vue 刷新当前页面的方式
vue.js实现刷新当前页面的方法教程
12-10
前言 Vue.js（是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，是一种数据驱动的前端框架 我们在开发vue的页面的时候，有时候会遇到需要刷新当前页面功能，但是vue框架自带的router是不支持刷新当前页面功能的，它只支持在路由路径变化时刷新页面。基于这个原理，为了实现刷新页面，可以先跳转到一个空页面，然后马上跳回来，从而实现这个功能。 开发工具环境 vue.js webstorm 方法如下 一、原理 如上图所示，我们需要为要刷新的页面A编写一个自动跳回的空页面，当用户操作了A页面后，A页面先跳转到
vue项目刷新当前页面的三种方式(重载当前页面数据,个人推荐第三种)
qq_42267338的博客
07-12 2108
vue项目刷新当前页面的三种方式(重载当前页面数据,个人推荐第三种)
Vue页面刷新的三种方式
Brilliant Me 的博客
07-16 7979
vue页面刷新的三种方式 由于功能需求，需要离开页面前告知用户是否需要丢弃未保存的数据，这时候切换的菜单会失效，但是菜单依然会高亮错误。所以要进行一次页面刷新。 方法一 原地页面刷新 this.$router.go(0) location.refresh() ...
Vue中刷新页面的三种方式
web_long的博客
08-16 2万+
一、通过js原始方法刷新 <template> <div> <div class="header"> <button @click="update()">刷新页面</button> </div> </div> </template> <script> export default { data(){ return{ } }, methods
vue 页面刷新三种方式
Allez_的博客
01-17 901
vue 页面刷新的三种方式
vue 重新部署后刷新页面
wzwzwz555的博客
02-03 491
思路 在打包时更新版号 判断版号不存在或者不相同时刷新下并且进行存储 在路由跳转时 对比存储的版号。2. 在路由守卫判断当前需不需要刷新 不同的刷新 相同的就不刷新。在路由守卫 路由跳转的时候进行判断。在public中放入js文件。1.首先设计一个版本号。
Vue页面刷新常用的4种方法
qq_37635012的博客
08-17 5364
在 Vue 中，可以通过 $forceUpdate() 方法来实现某个组件的强制更新，从而实现页面的刷新。具体来说，当某个组件的数据发生变化，但是该组件的视图没有及时更新，导致页面没有被正确渲染时，可以在需要刷新的组件中调用 $forceUpdate() 方法来强制更新。$router.go(0) 方法只适用于当前路由，如果你希望刷新其他路由对应的页面，需要使用其他方式，如重定向到该页面的路由或者刷新整个应用程序。注意：第二步中触发的事件或者调用的父组件方法，需要在组件的父组件中进行监听或者定义。
VUE实现当前页面刷新的七种方法
热门推荐
weixin_40381947的博客
07-18 3万+
需要注意的是，使用该方法会刷新整个页面，包括Vue实例、组件以及其他的页面元素，可能会导致一些不必要的开销，不是最优的解决方案。需要注意的是，该方法会重新加载整个页面，如果想要对页面局部进行刷新，可以考虑使用 Vue 自身的一些特性，比如通过设置组件的 key 属性实现组件的更新，或者通过调用。具体来说，当某个组件的数据发生变化，但是该组件的视图没有及时更新，导致页面没有被正确渲染时，可以在需要刷新的组件中调用。方法可以简单地实现当前页面的刷新，这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。
vue3项目刷新当前页面的三种方法
09-06
在Vue3项目中，刷新当前页面有以下三种常见的方法： 1. 利用window.location.reload方法刷新页面：可以在需要刷新的地方调用window.location.reload()来刷新整个页面。这种方法会重新加载所有的资源，包括HTML、CSS...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值