Vue页面重新加载刷新数据配置
第一种方式 reload
一、在根文件 app.vue文件中配置
//app.vue
<template>
<!-- 给全局挂载 适配元素 app -->
<div id="app">
<keep-alive include="DataSet">
<!-- 配置重置刷新 v-if="isRouterAlive" -->
<router-view v-if="isRouterAlive" />
</keep-alive>
</div>
</template>
<script>
import _ from 'lodash'
export default {
name: 'App',
//自定义
provide() {
return {
reload: this.reload
}
},
data() {
return {
//定义状态
isRouterAlive: true
}
},
methods: {
//重置
reload() {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
二、在需要引用重置的页面中添加
//dataSet.vue <<<=(需要引入的页面)
export default {
//使用options.d.ts 当中的inject变量 获取APP 里的配置状态(然后在需要调用的接口当中 加入this.reload)
inject: ['reload'],
data() {
return {
...
},
methods: {
//重置
getReload() {
this.reload() //调用刷新
},
}
}
大功高成!!!
补充:(推荐使用第一种 方式 reload,体验度好,无空白页面)
以下两种方式也是实现重置刷新的功能
缺点:相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验度不好
(2)window.location.reload()
(3)this.$router.go(0)