工作192:vue项目如何刷新当前页面

1.场景

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

2.遇到的问题

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

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

3.解决方法

provide / inject 组合

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

App.vue:

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

tableList.vue:

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

4.provide / inject 用法

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

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

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

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

深入理解数据驱动

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

1. 获取列表方法

2.重新获取数据

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

即其他查询条件保持不变，体验效果好

工作192:vue项目如何刷新当前页面相关推荐

Vue项目保存代码之后页面自动更新
Vue项目保存代码之后页面自动更新想要在代码中保存之后,页面自动刷新. 命令行敲如下代码 npm install webpack-dev-server 下载了这个东西就不用每次都手动刷新了,我也不知 ...
Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法 this.$router.go(0) location.reload() 跳转空白页再跳回原页面使用provide / inject ...
vue 项目在index.html页面直接引入jq库，报错$ is not defined解决方案
近日在vue项目开发中遇到一个问题:vue 项目在index.html页面直接引入jq库,报错$ is not defined解决方案... 首先说一下为什么会出现这个错误,其实项目发布到线上是不会出 ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
【vue】 vue项目开发卡片展示页面----菜品管理
vue项目开发卡片展示页面----菜品管理对话框表单获取父组件数据子组件dishform 对话框表单样式 methods 中的dataInit方法获取父组件传来的数据 <script> ...
vue项目登陆逻辑和页面加载逻辑
最近修改了俩个vue项目登陆逻辑,摸摸摸,三改四改,总结了一些思路: 文章目录首先,理清好思路 1.什么样的情况下是登陆状态(初始化加载 => App.vue) 2. 没有登陆的情况下,项目的 ...
php项目index页面空白,如何解决vue项目打包后打开页面空白的问题
这篇文章主要介绍了vue项目打包后打开空白解决办法,内容挺不错的,现在分享给大家,也给大家做个参考. 网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通 ...
vue项目打包后出现页面布局异常、图片显示不出来等问题
通常我们写完vue项目后,会执行 npm run serve 对项目进行打包.执行完后,就在项目的目录中生成dist文件夹.一开始,我以为双击dist文件夹里index.html会把打包后的项目运行起 ...
vue项目中跳转页面，页面从顶部开始
vue项目中采用路由机制,当页面进行跳转,滚轮的位置不会改变 mounted() {//设置滚动条指定document.documentElement.scrollTop=0},

工作192:vue项目如何刷新当前页面

工作192:vue项目如何刷新当前页面相关推荐

最新文章

热门文章