广告
返回顶部
首页 > 资讯 > 前端开发 > html >vue中怎么主动刷新页面
  • 435
分享到

vue中怎么主动刷新页面

2024-04-02 19:04:59 435人浏览 八月长安
摘要

今天就跟大家聊聊有关Vue中怎么主动刷新页面,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1.场景在处理列表时,常常有删除一条数据或者新增数据之后需

今天就跟大家聊聊有关Vue中怎么主动刷新页面,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

1.场景

在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

1. 用vue-router重新路由到当前页面,页面是不进行刷新的

2.采用window.reload(),或者router.Go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

3.解决方法

provide / inject 组合

作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

App.vue:

声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载

vue中怎么主动刷新页面

tableList.vue:

在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。

vue中怎么主动刷新页面

vue中怎么主动刷新页面

4.provide / inject 用法

provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

==========================================

深入理解数据驱动

以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重。

1. 获取列表方法

vue中怎么主动刷新页面

2.重新获取数据

vue中怎么主动刷新页面

3.这样再次调用获取数据,即可同步实现页面数据更新(不会重新刷新页面),同时保证有分页时,能够停留在当前页(刷新前如果是第二页,刷新后依然在第二页),

看完上述内容,你们对vue中怎么主动刷新页面有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网html频道,感谢大家的支持。

--结束END--

本文标题: vue中怎么主动刷新页面

本文链接: https://www.lsjlt.com/news/72426.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中怎么主动刷新页面
    今天就跟大家聊聊有关vue中怎么主动刷新页面,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1.场景在处理列表时,常常有删除一条数据或者新增数据之后需...
    99+
    2022-10-19
  • vue怎么实现页面刷新动画
    这篇“vue怎么实现页面刷新动画”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue怎么实现页面刷新动画”文章吧。index...
    99+
    2023-06-29
  • Vue怎么实现刷新页面
    这篇文章主要介绍“Vue怎么实现刷新页面”,在日常操作中,相信很多人在Vue怎么实现刷新页面问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么实现刷新页面”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-07-04
  • vue实现页面刷新动画
    本文实例为大家分享了vue实现页面刷新动画的具体代码,供大家参考,具体内容如下 做一个vue的页面刷新动画,找了好多动画样式,感谢大佬们造的轮子。 主要就是在index.html文件...
    99+
    2022-11-13
  • vue列表数据删除后主动刷新页面及刷新方法详解
    问题描述: 前端删除一条数据或者新增数据后,后端操作成功,但前端不会自动刷新,需要重新刷新当前页面 (用vue-router重新路由到当前页面,页面是不进行刷新的 ,采用windo...
    99+
    2022-11-12
  • 浅析vue中怎么刷新当前页面
    vue怎么刷新当前页面?下面本篇文章给大家介绍一下vue刷新当前页面的几种实现方法,希望对大家有所帮助!项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.思路(1)如果页面简单,调用接口刷新数据即可.(2)如果...
    99+
    2023-05-14
    前端 Vue.js JavaScript
  • Vue应用程序中怎么刷新页面
    Vue是一款流行的JavaScript框架,它是一个用于构建交互式Web应用程序的开发工具。Vue提供了许多有用的功能和工具,其中包括Vue Router。Vue Router是一个内置的路由管理器,它可以帮助开发者更好地管理Vue应用程序...
    99+
    2023-05-14
  • JavaScript中怎么刷新页面
    小编给大家分享一下JavaScript中怎么刷新页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
  • vue项目怎么刷新当前页面
    这篇文章将为大家详细讲解有关vue项目怎么刷新当前页面,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。场景在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页...
    99+
    2022-10-19
  • vue不刷新当前页面怎么办
    本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。vue不刷新当前页面怎么办?vue项目中数据更新页面不刷新问题这种情况可以分为很多种.但是究其原因就是vue3.0以下版本无法监听对象(包括数组以及对象)的变化,当数...
    99+
    2023-05-14
    Vue
  • vue中如何刷新当前页面
    这篇文章主要介绍了vue中如何刷新当前页面的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue中如何刷新当前页面文章都会有所收获,下面我们一起来看看吧。项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新...
    99+
    2023-07-05
  • vue中如何实现页面刷新以及局部刷新
    vue中如何实现页面刷新以及局部刷新,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一.全页面刷新修改 App.vue,代码如下:<template> &n...
    99+
    2023-06-26
  • Vue怎么实现父子组件页面刷新
    这篇文章主要介绍“Vue怎么实现父子组件页面刷新”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue怎么实现父子组件页面刷新”文章能帮助大家解决问题。很多时候我们在操作过页面时候,特别是增删改操作之...
    99+
    2023-06-30
  • vue3中怎么刷新当前页面
    这篇“vue3中怎么刷新当前页面”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3中怎么刷新当前页面”文章吧。1.业务场...
    99+
    2023-07-05
  • vue-router3.0版本中 router.push 不能刷新页面怎么办
    这篇文章主要为大家展示了“vue-router3.0版本中 router.push 不能刷新页面怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue-ro...
    99+
    2022-10-19
  • vue中实现页面刷新以及局部刷新的方法
    目录一.全页面刷新二、局部刷新三、应用场景总结一.全页面刷新 1.修改 App.vue,代码如下: <template> <div id="app"> ...
    99+
    2022-11-12
  • Vue路由this.route.push跳转页面不刷新怎么办
    本篇内容主要讲解“Vue路由this.route.push跳转页面不刷新怎么办”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue路由this.route.push跳转页面不刷新怎么办”吧!Vu...
    99+
    2023-07-04
  • 使用javascript怎么刷新页面
    使用javascript怎么刷新页面?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。javascript刷新页面的方法:1、使用“location.reload()”;2、使用“...
    99+
    2023-06-14
  • Vue路由this.route.push跳转页面不刷新怎么解决
    今天小编给大家分享一下Vue路由this.route.push跳转页面不刷新怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文...
    99+
    2022-10-19
  • thinkphp怎么实现页面的刷新
    本篇内容主要讲解“thinkphp怎么实现页面的刷新”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“thinkphp怎么实现页面的刷新”吧!一、页面刷新的基本含义在网站开发过程中,页面刷新是指在当...
    99+
    2023-07-05
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作