最实用的vue刷新当前页面，provide / inject 组合 方式实现vue页面刷新

最新推荐文章于 2024-05-11 08:15:27 发布
最新推荐文章于 2024-05-11 08:15:27 发布
阅读量4.6k 收藏 18
点赞数 7
分类专栏： Vue.js框架开发 Java web开发 文章标签： vue刷新当前页面 provide / inject 组合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dream_xun/article/details/83024487
版权

这是一种最实用的vue刷新当前页面，其他方式一般会出现一个瞬间的空白页面，体验不好，相当于按ctrl+F5 强制刷新那种

方式：provide / inject 组合 方式实现vue页面刷新

1.修改App.vue代码如下图所示

通过声明reload方法，控制isRouterAlice属性true or false 来控制router-view的显示或隐藏，从而控制页面的再次加载

2.在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，然后直接用this.reload来调用就行

 

Dream_xun
关注
  • 7
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vue3.0 使用inject(“reload“)刷新页面
weixin_45878947的博客
11-16 4760
（1）在app.vue <template> <router-view v-if="isRouterAlive" /> </template> <script> import { defineComponent, ref, nextTick, provide } from 'vue'; export default defineComponent({ setup() { // 局部组件刷新 const isRouter...
Vue 3 组合式 provide/inject
人生代码 ---- 公众号
11-14 1934
组合式提供与注入在之前的章节，我们讲了选项式的 提供与注入，今天我们继续讲组合式提供与注入。我们也可以在组合式 API 中使用 provide/inject。两者都只能在当前活动实例的 ...
2024年Web前端最全vue项目如何刷新当前页面，2024大厂前端知识点总结+面试题解析
最新发布
2301_79985012的博客
05-11 290
现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好。但是，试过的会发现用vue-router重新路由到当前页面，页面是不进行刷新的，根本没有任何作用~所以这个方法out！这个方式，相比第一种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，可采用。
Vue实现页面刷新（不闪白）
hkduan的博客
06-21 2938
Vue实现页面刷新（不闪白） 普通方法： location.reload(); this.$router.go(0); 这两种方法会强制刷新页面，会出现短暂的空白闪烁 使用 provide和inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 简单来说就是子孙组件可以访问到祖先的对象方法。 在 App.vue 文件里写入provide的方法 <!--页面级Vue组件--> <template>
vue刷新当前页面，provide / inject 组合 方式
qy88666的博客
08-03 597
1.首先，要修改下你的app.vue <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { name: 'App', provide(){ return{ reload: th
vue中使用provide-inject,实现刷新页面
^璐三岁要耍蓅氓♡
06-14 465
vue中父组件给子和孙组件插入一个依赖，使其能传递关系。 文档 这里先做一个简单的实例， 在app.vue中： <script> export default { name:"App", components:{ }, provide:{ message:'来自父组件的消息！' } } </script> 在其中的一个路由中： <template> <div class="home"> <
vue中使用[provide/inject]实现页面reload的方法
10-16
主要介绍了在vue中使用[provide/inject]实现页面reload的方法，文中给大家提到了在vue中实现页面刷新不同的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue项目如何刷新当前页面的方法
08-27
Vue 项目刷新当前页面方法 在 Vue 项目中，刷新当前页面是非常常见的需求，例如在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。本文将介绍 Vue 项目如何刷新当前页面的方法。 问题...
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
在Vue.js应用中，特别是在结合Ant Design Vue进行前端开发时，我们常常会遇到需要在用户刷新页面后保持当前页面路由、选中菜单以及`Menu`选中状态的需求。这通常涉及到路由管理、状态持久化以及组件间通信等技术。 ...
vue实现在进行增删改操作后刷新页面
11-20
问题 通常在后台管理项目中，对数据进行增...4.provide / inject ：（推荐） 点此查看VUE官方解释： 允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 首先
vue provide和inject使用 刷新页面
qq_37672347的博客
04-15 284
参考链接 app.vue 祖先组件 子组件
vue中的provide/inject的学习使用
08-27
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目刷新页面（provide、inject方式）
yang_da_da的博客
04-21 399
开发vue项目时，框架需要一个刷新按钮，手动刷新页面渲染，我们知道window.reload()，或者router.go(0)可以路由刷新，重新进入当前页面，但是这种方法的问题在于会导致页面白屏，用户体验不是很好。 provide、inject方式 我们在需要刷新的路由层级，<router-view>渲染的地方用v-if去控制页面刷新。在这里用App.vue举例 <template> <div id="app"> <router-view v-if="
Vue怎样刷新当前的页面 （provide / inject刷新当前页面）
qq_41994549的博客
11-06 2141
provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。  这种方式可以避免在使用props传值时，必须将每一个属性都传递给子组件的写法，当使用的公共组件不确定会被传递什么值的时候，使用这种写法非常方便。   在父组件中APP.Vue中 &lt;template&gt; &lt;div id="app" style=...
inject: [‘reload‘] 是一个在 Vue.js 组件中常见的语法，用于将父组件中定义的 reload 方法注入到子组件中。
qq_41920758的博客
01-17 828
方法被注入到了子组件中，使得子组件可以直接调用这个方法。这通常用于当子组件需要从父组件获取某些功能或数据时，而不是通过 props 传递。中点击 "Reload" 按钮时，它会调用从。在给定的代码片段中，
vue使用provide / inject 组合刷新页面+单独组件刷新
BiangBaing的博客
12-20 859
原文链接：https://www.cnblogs.com/leng12/p/xiaoleng.html 一、this.$router.go(0) 相当于F5刷新，这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好； 二、location.reload() 这种也是一样，画面一闪，体验不是很好，相当于页面刷新 推荐解决方法： 三、用provide / inject 组合 原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效.
VUE中实现点击按钮刷新页面的方法
热门推荐
weixin_42088314的博客
11-03 1万+
VUE中实现点击按钮刷新页面的方法vue中provide和inject 用法通过依赖注入实现页面刷新源码片段： vue中provide和inject 用法 首先我们需要先了解一下vue中的依赖注入provide 和 inject 概念： 作用：用于父组件向子孙组件传递 使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据，这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间
reload vue 重新加载_vue this.reload 方法 配置
weixin_39795284的博客
12-21 647
这篇文章主要为大家详细介绍了vue this.reload 方法 配置，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！1.场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。2.遇到的问题1. 用vue-router重新路由到当前页面，页面是不进行刷新的2.采用window.reload()，或者router.go(0...
vue location刷新页面
08-04
在Vue中，可以使用provide/inject来实现页面刷新。首先，在根组件中，比如App.vue，可以定义一个provide方法，返回一个包含reload方法的对象。reload方法用于刷新页面。然后，在需要刷新页面的组件中，使用inject来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值