VUE刷新当前页面的三种方法

最新推荐文章于 2024-09-07 18:41:27 发布
最新推荐文章于 2024-09-07 18:41:27 发布
阅读量1.1k 收藏 1
点赞数 1
文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhao97/article/details/105160351
版权
本文介绍了在Vue中刷新当前页面的三种方法：通过`window.reload()`、使用`this.$router.go(0)`以及利用`provide / inject`组合实现。`provide / inject`允许在不借助props的情况下，父组件向任意深度的子组件传递数据。
摘要由CSDN通过智能技术生成

方法一

window.reload()

方法二

this.$router.go(0)

方法一和方法二 缺点：浏览器会重载，闪烁，有空白，体验不好

方法三 provide / inject 组合

作用：父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量(不论子组件有多深)。

  • provide： 一个对象或返回一个对象的函数

  • inject： 一个字符串数组或一个对象

1. app.vue中

<template>
  <div id="app">
        <router-view v-if=
最低0.47元/天 解锁文章
～倩
关注
vue项目刷新当前页面的三种方法
weixin_44635214的博客
06-01 2607
最近项目加了一个新需求，游客模式在点击某些按钮是需要跳出登陆框，登陆成功后才可以生效，所以需要在登陆成功后重新刷新当前页面，下面总结了一些我的尝试方法： 1、我一开始的想法就是使用这种方式，直接重新跳转至当前页面 this.$router.replace({path:'/index'}) 试过后发现用vue-router重新路由到当前页面，页面是不进行刷新的，根本没有任何作用，所以这种方法是不可行的； 2、然后就想到最直接的方式就是像ctrl+F5 一样强制刷新： location. reload() t
vue项目刷新当前页面
qq_34941404的博客
02-06 717
3种方式 第一种： location.reload() this.router.go(0) 这2种方式都可以刷新当前页面，缺点就是相当于按了F5强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好 第二种： 新建一个空白页面，点击确定的时候先跳转到这个空白页，然后再立马跳转回来 //跳转到空白页 this.$router.replace({ path:'', name:'', }) 空白页 <template> </template> <script&.
vue中强制刷新的方法
最新发布
weixin_43866103的博客
09-07 674
五、provide/inject实现刷新：通过设置isReload来解决不刷新问题，原理就是通过v-if 控制组件的出现与消失, 达到重新渲染的效果。四、使用key-changing方法：使用key标记组件身份，当key改变时就是释放原始组件，重新加载，key的值可以是任意类型。window.location.reload()：安卓不支持 、 ios支持、pc支持。this.$router.go(0)：安卓、ios都不支持、pc支持。二、 v-if方法：组件中v-if的值发生改变时，会重新渲染。
vue刷新当前页面
Maisu的博客
01-16 8854
通过location.reload和$router.go(0)都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5键刷新页面优点:足够简单缺点:会出现页面空白,用户体验不好通过$router.replace方法,跳转一个空白页面,然后再调回之前页面,它利用vue-router切换页面会把页面销毁并新建新页面的特性优点:不会出现页面空白,用户体验好缺点:地址栏会出现快速切换的过程。
# vue刷新当前页面
qq_29247839的博客
03-22 1025
在项目开发中遇到了需要刷新当前页面的场景。中途尝试了以下四种方法1、this.forceUpdatethisforceUpdate() 是Vue.js中的一个方法，用于强制组件重新渲染，即使没有响应式数据发生变化。在history记录中前进或者后退val步，当val为0时刷新当前页面。可以简单地实现当前页面的刷新，这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。这个方法会重新加载当前URL所对应的页面，从而实现页面的刷新效果。
新手：Vue 刷新当前页面
java新手的博客
01-08 968
采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好，在vue中可以使用provide/inject组合，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 在App.vue组件中的代码： &lt;template&gt; &lt;div id="app"&gt; ...
vue项目如何刷新当前页面的方法
08-27
Vue 项目刷新当前页面方法 在 Vue 项目中，刷新当前页面是非常常见的需求，例如在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。本文将介绍 Vue 项目如何刷新当前页面的方法。 问题...
Vue页面刷新记住页面状态的实现
10-15
在Vue开发中，有时我们需要实现页面刷新后仍然能记住用户在页面上的操作状态，比如搜索条件、筛选选项等。...通过以上方法，我们可以有效地在Vue项目中实现在页面刷新后记住和恢复用户的页面状态，提高用户体验。
vue.js实现刷新当前页面的方法教程
12-10
下面我们将详细介绍如何在Vue.js环境中实现刷新当前页面的方法。 **一、刷新原理** 刷新页面的基本思路是利用Vue Router的导航机制。首先创建一个空页面（例如：/user/back），当用户完成某个操作后，页面会跳转到...
(转)vue项目刷新当前页面
weixin_30292843的博客
06-08 103
场景： 有时候我们在vue项目页面做了一些操作，需要刷新一下页面。 解决的办法及遇到的问题： this.$router.go(0)。这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好 用vue-router重新路由到当前页面，页面是不进行刷新的。 location.reload()。这种也是一样，画面一闪，体验不是很好 推荐解决方法： 用provi...
Vue刷新当前页面
huang_hai_an的博客
01-04 518
在Vue中，如果你想刷新当前页面，通常有几种方法可以选择。
vue项目 刷新当前页面
ownlight的博客
10-29 164
修改app.vue 通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。 isRouterAlive //true or false 来控制 然后在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，最后直接用this.reload调用 转载自 qq_16772725 ...
Vue无感刷新当前页面
Cherry
02-18 4104
使用 Vue 选项/组合 Api provide / inject Api 地址，此方法可以实现无感刷新并且不会出现闪烁的空白。 首先在根组件 App.vue 定义这个方法 <template> <div id="app"> <router-view v-if="routerAlive"></router-view> </div> </template> export default { /
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、付费专栏及课程。

余额充值