Vue 强制页面刷新（provide 和 inject）

一、常规方法

location.reload();
this.$rotuer.go(0);

存在问题：

1.强制刷新页面，出现短暂的空白闪烁。

2.h5页面在安卓机方法不兼容。

this.$rotuer.go(0) 安卓、ios都不支持、pc支持
location.reload() 安卓不支持、 ios支持、pc支持

二、provide和inject实现页面刷新

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

1、在 App.vue 文件里写入 provide 的方法

<template><div id="app"><keep-alive> <router-view v-if="isRouterAlive"></router-view></keep-alive></div>
</template><script>
export default {name: 'App',provide () {  // 在祖先组件中通过 provide 提供变量return {reload: this.reload  //  声明一个变量}},data () {return {isRouterAlive: true  // 控制 router-view 是否显示达到刷新效果}},methods: {// provide中声明的变量reload () {// 通过 this.isRouterAlive 控制 router-view 达到刷新效果this.isRouterAlive = false this.$nextTick(function () {this.isRouterAlive = true})}}
}</script>

2、子孙组件中 inject 引用声明的变量

<template>
<div class="page"><button @click="reloadFun">刷新</button>
</div>
</template><script>
import Vue from 'vue';export default {inject:['reload'], // 使用 inject 注入 reload 变量 data(){return{}},methods: {reloadFun(){this.reload();  // 直接使用}},mounted() {}}
</script>

Vue 强制页面刷新（provide 和 inject）相关推荐

nignx部署Vue单页面刷新路由404问题解决
nignx部署Vue单页面刷新路由404问题解决参考文章: (1)nignx部署Vue单页面刷新路由404问题解决 (2)https://www.cnblogs.com/wuchenggong/p/ ...
[vue] 说说你对provide和inject的理解
[vue] 说说你对provide和inject的理解通过在父组件中inject一些数据然后再所有子组件中都可以通过provide获取使用该参数,主要是为了解决一些循环组件比如tree, menu, ...
vue.js页面刷新出现闪烁问题的解决
vue.js页面刷新出现闪烁问题的解决参考文章: (1)vue.js页面刷新出现闪烁问题的解决 (2)https://www.cnblogs.com/wnsry/p/9132398.html 备忘一 ...
vue实现页面刷新以及局部刷新的方法
1.利用Vue里面的provide+inject组合,实现全页面刷新通过在APP页面进行demo进行刷新,不会像前两种那样出现短暂的闪烁效果,提升用户体验,通常可以使用这种方式 (1)在APP页面中 ...
vue组件深度传值provide、inject,值类型响应式的方法
文章目录前言一.provide,inject是什么? 二.使用步骤 1.祖先组件provide注入,并且传入的是整个this指向 2.后代组件接收总结前言最近封装了一个上传,下载,查看附件的 ...
小程序中强制页面刷新
1.tab页面切换时强制页面数据刷新 // pageTabB => pageTabA wepy.switchTab({ url: '/pages/pageTabA',success(){let ...
vue全局变量页面刷新时数据丢失问题
页面刷新后vue全局变量数据丢失在开发中,我们需要将一些数据存到全局变量中,如用户的用户名等,便于页面展示,保存从服务器发送请求返回的数据,以避免在不同组件发送相同请求时,重复请求服务器. 方法一: ...
vue所有页面刷新一次mounted(以及所有生命周期函数)执行两次的解决方法
刚开始我发现页面每刷新一次,接口都请求两次,我以为是因为axios发送OPTIONS预检请求,但是我发现两次请求都是正常的get或者是post请求,并且只有在页面刷新的时候请求才触发两次,点击查询或者 ...
vue关闭页面刷新页面清除缓存
mounted() {this.enterPage()}, destroyed(){this.leavePage() }, methods: { /* 打开:load 关闭:beforeload+un ...

Vue 强制页面刷新（provide 和 inject）

一、常规方法

二、provide和inject实现页面刷新

1、在 App.vue 文件里写入 provide 的方法

2、子孙组件中 inject 引用声明的变量

Vue 强制页面刷新（provide 和 inject）相关推荐

最新文章

热门文章