vue this.reload 方法配置, 优于window.reload()的页面刷新

相关网址： https://www.cnblogs.com/yinn/p/9056731.html

1.场景

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

2.遇到的问题

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

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

3.解决方法

provide / inject 组合

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

我的项目配置：

①home.vue

<router-view v-if="isReloadAlive"></router-view>

<router-view v-if="isReloadAlive"></router-view>export default {provide() {return {reload: this.reload}},data(){isReloadAlive : true},methods: {reload() {this.isReloadAlive = false;this.$nextTick(function(){this.isReloadAlive = true;})}}
}

②使用reload方法的页面

内容管理 - 投顾推荐 tgtj.vue

export default {inject: ['reload'],     // 注入 reload 方法data(){。。。。},method: {set: function(id){let param = {"recommendedConsultant.id": this.recommendedConsultant_id,"recommendedConsultant.sequence": this.recommendedConsultant_sequence,"recommendedConsultant.consultant_id": id}setRecommendedAdvisor(param).then((data) => {this.$message({ message: data.ret.retMsg });if(data.ret.succeed){this.reload()           // 调用刷新方法}});}}
}

vue this.reload 方法配置, 优于window.reload()的页面刷新相关推荐

vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
vue开发 - 将方法绑定到window对象，给app端调用
通过jsBridge方法,H5可以调用客户端(ios,android)的内部方法,同样,客户端也需要能调用H5页面里定义的js方法,但是在vue里,所有的方法都是在组件内部声明的,也只能在组件内部调用 ...
vue 把组件方法暴露到window对象中
方法 1(简单,但不推荐) mounted() {// 2. 在mounted阶段声明globalFn,来调用组件内的方法window.globalFn = () => {this.getDet ...
VUE 中使用 iview Form组件 enter键防止页面刷新
<Form :label-width="100" inline label-position='left' @keydown.native.enter.prevent =&q ...
vue实现页面刷新以及局部刷新的方法
1.利用Vue里面的provide+inject组合,实现全页面刷新通过在APP页面进行demo进行刷新,不会像前两种那样出现短暂的闪烁效果,提升用户体验,通常可以使用这种方式 (1)在APP页面中 ...
vue切换菜单时不需要页面刷新_antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作...
废话不说,上代码! nav 1 nav 2 nav 3 重点: 1,selectedkeys要设置成$route.path地址 2,a-menu-item 的key设置成要去的地址刷新页面,成功! ...
Vue实现父子组件页面刷新的常用方法
很多时候我们在操作过页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望返回的界面中的数据要和数据库中的数据进行同步,就需要刷新当前页面,如果是使用ajax可以使用异步请求实现页面的局部刷 ...
html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
JavaScript location.reload() 方法 Location 对象的 reload() 方法用于重新加载当前文档(页面),语法如下: location.reload( false| ...
vue 使用this.reload方法刷新页面配置
1.在vue(app.vue文件)里配置: <template><div><router-view v-if="isRouterAlive" /> ...

vue this.reload 方法配置, 优于window.reload()的页面刷新

vue this.reload 方法配置, 优于window.reload()的页面刷新相关推荐

最新文章

热门文章

vue this.reload 方法 配置, 优于window.reload()的页面刷新

vue this.reload 方法 配置, 优于window.reload()的页面刷新相关推荐

最新文章

热门文章

vue this.reload 方法配置, 优于window.reload()的页面刷新

vue this.reload 方法配置, 优于window.reload()的页面刷新相关推荐