技术前线-绿色安全的源码下载站!
首 页文章资讯下载中心html颜色代码表
当前位置:技术前线文章资讯web技术JavaScript

vue项目如何刷新当前页面的方法

减小字体 增大字体 作者:佚名  来源:本站整理  发布时间:2018-05-21 01:22:34

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()调用,即可刷新当前页面。

4.provide / inject 用法

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持技术前线。

Tags:vue 刷新页面

作者:佚名
+2
-0

用户名: 查看更多评论

内 容:

         验证码:

所有源码和资料均为软件作者提供和网友推荐收集整理而来,仅供学习和研究使用。如有侵犯你版权的,请来信指出,本站将立即改正。

关于本站 | 网站帮助 | 广告合作 | 下载声明 | 友情连接 | 网站地图 | 资源sitemap | 文章sitemap

Copyright © 2014-2026 技术前线. All Rights Reserved .

Powered by:源码下载www.gaoitde.com 页面执行时间:17,312.50000 毫秒 建站时间:2014-09-28        网站备案:渝ICP备14007251号-1