vue刷新当前页面

最新推荐文章于 2024-08-16 23:27:45 发布
最新推荐文章于 2024-08-16 23:27:45 发布
阅读量210 收藏
点赞数
分类专栏： vue开发 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsy_1019/article/details/103575863
版权

vue刷新当前页面有挺多种方法，比如
window.location.reload()
或
this.$router.go(0)

但是这两种方法是会出现一瞬间的白屏，体验不好，所以这里给大家推荐第三种比较好用的刷新页面的方法：

在app.vue的加上v-if属性
在这里插入图片描述
在data里面加上isRouterAlive,当然这个属性名可以自己定义，默认值为true
在这里插入图片描述
methods里面加入一个刷新的方法
在这里插入图片描述
最后，需要把这个函数 provide 出去
在这里插入图片描述
这样，app.vue上就设置完了
那么当我们需要刷新的时候，在需要的页面上加上这个函数就可以了

首先注入这个函数
在这里插入图片描述
然后在需要用到这个函数的地方去引用就行了
在这里插入图片描述
这样子就可以刷新页面了，而且不会出现白屏的情况，比前面两种方法好用，推荐大家使用。

附带上完整代码

app.vue页面
在这里插入图片描述
用到刷新的页面
在这里插入图片描述
到这里就使用完毕了

lsy_1019
关注
专栏目录
VUE刷新当前页面，重载页面数据
eric823的博客
02-01 1503
VUE刷新当前页面，重载页面数据 在开发Vue项目过程中，执行完，增，删，改，操作的时候，我们需要刷新一下页面，重载数据。发现，发现使用最简单的页面刷新方法location.reload()或this.$router.go(0)均会导致页面刷新过程中出现空白现象的发生，体验不佳；在vue中，可以用到一个 provide / inject 这对用例，通过控制router-view 的显示与隐藏，来重渲染路由区域，重而达到页面刷新的效果。 1.首先在我们的根组件APP.vue里面,写入刷新方法，路由初始状态是显
vue刷新当前页面的方法
mushroomLNL的博客
03-22 1852
第一个想到的方法是this.$router.push() , 但是会报错 , 不让自己页面跳转自己页面 , 就算解决了这个问题跳转了之后 , dom也不会渲染 , 页面的数据显示不出来 , 所以查询了一下方法来解决问题 location.reload() 不推荐 : 页面出现一瞬间的空白 这个方法相当于( ctrl + R )刷新当前页面 , 但是刷新过后vuex里面的值也会重新刷新 , 当我们要实现多个组件根据 vuex 里面的值做相应的判断时 , 这个功能不能实现 , 于是我们结合window.se
vue.js实现刷新当前页面的方法教程
10-19
主要给大家介绍了关于vue.js实现刷新当前页面的方法教程，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
Vue如何刷新当前页面
七月❤的博客
11-12 137
在做登录界面的时候遇到刷新页面的问题，用 this.$router.push('/');不能返回刷新界面，错误的账号密码依然留在上面，在百度之后遇到了好的解决方法，原文链接：https://blog.csdn.net/qq_16772725/article/details/80467492 ...
前端（Vue）动态换肤的通用解决方案及原理分析（1）
最新发布
xiao廸要飞
08-16 1010
本文讲解了在 Vue.js 项目中实现动态换肤的原理和方法。核心思想是使用 SCSS 变量定义颜色，通过修改这些变量的值来动态改变应用的主题色。为实现换肤功能，需要避免将色值硬编码，并通过 ThemeSelect 组件切换主题色。文章还介绍了如何处理第三方组件库（如 Element Plus）的主题色，以及自定义组件的主题色。使用 v-bind="$attrs" 简化了属性传递操作。为了保持用户的主题选择，文章通过 Vuex 和 LocalStorage 实现了主题色的本地缓存，使页面刷新后主题色不会丢失。
Vue刷新当前页面的方法
灰灰的博客
11-15 6959
Vue页面不跳转刷新
Vue刷新当前页面
qq_28500793的博客
03-24 626
Vue刷新页面 在vue项目换肤制作中，说到了，点击切换ID来实现品牌数据的替换，但是有一点，我们的id是通过vuex中来计算的到的，这样只有在页面刷新的时候才能获取最新的ID，这就需要我们在每次点击按钮切换的时候，都要刷新当前页面。 我们可以通过在app.vue中绑定reload事件，通过provide传递出去。如下： 通过切换RIgthNav的显示隐藏来调用需要切换的页面。 现在我们需要在需...
# vue刷新当前页面
qq_29247839的博客
03-22 1010
在项目开发中遇到了需要刷新当前页面的场景。中途尝试了以下四种方法1、this.forceUpdatethisforceUpdate() 是Vue.js中的一个方法，用于强制组件重新渲染，即使没有响应式数据发生变化。在history记录中前进或者后退val步，当val为0时刷新当前页面。可以简单地实现当前页面的刷新，这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。这个方法会重新加载当前URL所对应的页面，从而实现页面的刷新效果。
Vue页面刷新记住页面状态的实现
10-15
在Vue开发中，有时我们需要实现页面刷新后仍然能记住用户在页面上的操作状态，比如搜索条件、筛选选项等。这通常涉及到页面状态的持久化。本文将详细介绍如何在Vue项目中实现这一功能。 首先，Vue提供了`...
vue项目如何刷新当前页面的方法
08-27
Vue 项目刷新当前页面方法 在 Vue 项目中，刷新当前页面是非常常见的需求，例如在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。本文将介绍 Vue 项目如何刷新当前页面的方法。 问题...
vue项目刷新当前页面的三种方法
10-17
通常，当用户进行一些操作（如删除、增加记录、表单提交等）之后，开发者需要让当前页面重新加载以显示最新状态，本文将详细介绍在Vue项目中实现页面刷新的三种方法。 首先，传统的刷新页面的方式是使用JavaScript...
Vue 路由切换时页面内容没有重新加载的解决方法
10-18
今天小编就为大家分享一篇Vue 路由切换时页面内容没有重新加载的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 重新加载当前页面
猥琐的刚的博客
06-04 5456
核心 通过provide / inject组合方式 操作流程 修改 App.vue 通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载，这边定义了 isRouterAlive //true or false 来控制 流程 router-view 增加 v-if 判断 增加provide 增加data 增加method reload 代码 <template> <div id="app"> <router-view v-i
【Vue】实现当前页面刷新的四种方法
热门推荐
aDiaoYa_的博客
03-26 4万+
这两周在写一个后台管理，每次调用接口实现增删改查的过程中，都需要刷新当前页面或者刷新数据。因此整理了如下方法： 方法一：location.reload 方法二：$router.go(0) 方法三：provide、inject和$nextTick 方法四：创建空白页
vue 实现当前页面刷新的四种方法
qq_44716001的博客
11-02 538
this.$router.go(-1)：后退+刷新；this.$router.go(0)：刷新；this.$router.go(n) ：前进n个页面。
Vue第 9 篇，Vue页面重置和刷新（Vue数据重置）
weixin_65793170的博客
11-24 1万+
⭐一. this.reload()方法（体验度好，无空白页面，相当于页面数据重置））二. 利用vue中的路由方法（偏向于刷新页面）三. 利用window的reload方法（强制刷新）
vue中换肤
dingyu0064的博客
08-07 179
　　项目中期的时候，大佬对项目的色彩不满意，要求更换，这样产品就提出了需求，要求可以根据用户自己的需求去自己切换主题色；这边根据产品提供的几种颜色，看了下网上的博客，一开始我以为可以只引入一个css文件，然后像js一样提出一个变量改变这个变量就可以的，但是看到后期，发现css文件还是要准备多个。（如果有哪个亲能可以这样实现，希望能告知我一下，让我也见识下） 　　这里我引入了sass，因...
vue中怎么刷新当前页面
m0_68094390的博客
05-13 1558
需要注意的是，使用window.location.reload()方法会重新加载整个页面，这可能会导致一些数据丢失或者状态重置。在Vue中，可以使用window.location.reload()方法来刷新当前页面。这个方法会重新加载当前页面，并且会重新执行所有的JavaScript代码。在上面的代码中，我们在组件中定义了一个按钮，当按钮被点击时，会调用refreshPage方法来刷新当前页面。在Vue组件中，可以在方法中调用window.location.reload()方法来刷新当前页面。
VUE实现当前页面刷新的七种方法
weixin_40381947的博客
07-18 4万+
需要注意的是，使用该方法会刷新整个页面，包括Vue实例、组件以及其他的页面元素，可能会导致一些不必要的开销，不是最优的解决方案。需要注意的是，该方法会重新加载整个页面，如果想要对页面局部进行刷新，可以考虑使用 Vue 自身的一些特性，比如通过设置组件的 key 属性实现组件的更新，或者通过调用。具体来说，当某个组件的数据发生变化，但是该组件的视图没有及时更新，导致页面没有被正确渲染时，可以在需要刷新的组件中调用。方法可以简单地实现当前页面的刷新，这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值